<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/assets/ezuikit_theme/css/index-5ab938ace5.css">
    <link rel="stylesheet" href="/assets/ezuikit_theme/css/datepicker-9a9eb0e7a3.min.css">
    <title>ezopen</title>
    <script>function getweb() { if ((!!window.ActiveXObject || "ActiveXObject" in window)) { return "IE"; } if (navigator.userAgent.indexOf("Firefox") != -1) { return "Firefox"; } if (navigator.userAgent.indexOf("Chrome") != -1) { return "Chrome"; } if (navigator.userAgent.indexOf("Safari") != -1) { return "Safari"; } }</script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            width: 100%;
            background: black;
        }

        .disabled {
            cursor: not-allowed;
        }

        .in {
            opacity: 1;
        }

        .hide {
            display: none !important;
        }

        .transparency {
            opacity: 0;
        }

        .ie-hint {
            display: flex;
            color: red;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #000000;
        }
    </style>
    <style>.draw-window {border: none!important}</style><style>@keyframes antRotate {to {transform: rotate(400deg);transform-origin:50% 50%;}} .loading {display: inline-block;z-index: 1000;-webkit-animation: antRotate 1s infinite linear;animation: antRotate 1s infinite linear;}</style><script src="/assets/ezuikit_v3.6//js/jsPlugin-1.2.0.min.js?v=20211012"></script><style>@keyframes antRotate {to {transform: rotate(400deg);transform-origin:50% 50%;}} .loading {display: inline-block;z-index: 1000;-webkit-animation: antRotate 1s infinite linear;animation: antRotate 1s infinite linear;}</style><script type="text/javascript" src="/assets/ezuikit_v3.6//js/playctrl/AudioRenderer.js"></script><script type="text/javascript" src="/assets/ezuikit_v3.6//js/playctrl/SuperRender_10.js"></script></head>

<body>
<script>
    if (getweb() === 'IE') {
        var ieHint = document.createElement("div");
        ieHint.className = "ie-hint";
        ieHint.innerHTML = "轻应用服务暂不支持IE浏览器播放"
        document.body.appendChild(ieHint)
    }
</script>
<script src="/assets/ezuikit_v2.6.4/js/jquery.min.js"></script>
<script src="/common/scripts/jquery-39b5fb0510.cookie.js"></script>
<script src="/assets/ezuikit_v3.6/ezuikit.js"></script>
<script src="/assets/ezuikit_theme/js/timeLine.js"></script>
<script src="/assets/ezuikit_theme/js/datepicker.js"></script>
<script src="/assets/ezuikit_theme/js/datepicker.zh-CN.js"></script>
<script src="https://open.ys7.com/assets/ezuikit_v2.6.4/npm/js/adapeter.js"></script>
<script src="https://open.ys7.com/assets/ezuikit_v2.6.4/npm/js/janus.js"></script>
<script src="https://open.ys7.com/assets/ezuikit_v2.6.4/npm/js/tts.js"></script>
<script>
    function getParentUrl() { var url = null; if (parent !== window) { try { url = parent.location.href; } catch (e) { url = document.referrer; } } return url; }
    function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null }
    function request(url, method, params, header, success, error) {const _url = url; const http_request = new XMLHttpRequest(); http_request.onreadystatechange = function () { if (http_request.readyState == 4) { if (http_request.status == 200) { const _data = JSON.parse(http_request.responseText); success(_data) } } }; http_request.open(method, _url, true); const data = new FormData(); for (const i in params) { data.append(i, params[i]) } http_request.send(data) }
    // 日期格式
    Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, "d+": this.getDate(), "h+": this.getHours(), "m+": this.getMinutes(), "s+": this.getSeconds(), "q+": Math.floor((this.getMonth() + 3) / 3), "S": this.getMilliseconds() }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt };
    function requestFullScreen(element) {
        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
        if (requestMethod) {
            requestMethod.call(element);
        } else if (typeof window.ActiveXObject !== "undefined") {
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
                wscript.SendKeys("{F11}");
            }
        }
    }
    function cancelFullScreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
    }
</script>
<div id="headControl" class="head-message" style="background:#000000;color:#FFFFFF;"><div class="header-controls-left" id="headerControls-left" style="display: flex;justify-content: space-between;"><span id="deviceID" style="position:relative;margin-left: 12px;"><span id="deviceID-content">F60206783</span><span id="deviceID-remove" title="移除" style="position: absolute;top: -16px;right: -10px;display: none;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15"><circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7"></circle><rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1"></rect><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1"></line><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5"></line></svg></span></span><span id="deviceName" style="position:relative;margin-left: 12px;"><span id="deviceName-content">C4(F60206783)</span><span id="deviceName-remove" title="移除" style="position: absolute;top: -16px;right: -10px;display: none;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15"><circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7"></circle><rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1"></rect><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1"></line><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5"></line></svg></span></span></div><div class="header-controls-right" id="headerControls-right" style="justify-content: space-between; display: none;"><span id="cloudRec" style="position:relative;margin-right: 12px;"><span id="cloudRec-content">
        <span>
          <svg fill="#FFFFFF" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="2 0 20 20">
	<path d="M9.5,13.1c-0.3,0-0.5-0.2-0.5-0.5V8.8c0-0.3,0.2-0.5,0.5-0.5S10,8.5,10,8.8v3.8C10,12.8,9.8,13.1,9.5,13.1z"></path>
	<path d="M7.6,10.6c-0.1,0-0.3-0.1-0.4-0.2C7,10.2,7,9.9,7.3,9.7l1.9-1.7c0.2-0.2,0.5-0.2,0.7,0l1.8,1.7
		c0.2,0.2,0.2,0.5,0,0.7c-0.2,0.2-0.5,0.2-0.7,0L9.5,9.1l-1.6,1.4C7.8,10.6,7.7,10.6,7.6,10.6z"></path>
	<path d="M13.2,15.7H5.6c-2.1-0.1-3.8-1.8-3.8-3.9c0-1.8,1.3-3.4,3-3.8c0.4-2.2,2.3-3.9,4.6-3.9c2.3,0,4.2,1.7,4.6,3.8
		c1.8,0.4,3.1,1.9,3.1,3.8C17.1,13.9,15.4,15.7,13.2,15.7z M5.6,14.7h7.6c1.6,0,2.9-1.3,2.9-2.9c0-1.5-1.1-2.7-2.6-2.9l-0.4,0l0-0.4
		c-0.2-1.9-1.7-3.3-3.6-3.3C7.5,5.1,6,6.6,5.8,8.5l0,0.4l-0.4,0c-1.4,0.2-2.5,1.4-2.5,2.9C2.8,13.3,4.1,14.6,5.6,14.7z"></path>
          </svg>
        </span>
        </span><span id="cloudRec-remove" title="移除" style="position: absolute;top: -16px;right: -10px;display: none;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15"><circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7"></circle><rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1"></rect><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1"></line><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5"></line></svg></span></span><span id="rec" style="position:relative;margin-right: 12px;"><span id="rec-content">
        <span>
          <svg fill="#FFFFFF" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="2 0 20 20">
            <path d="M13,16.3H5.5c-1.1,0-2-0.9-2-2V3.8c0-1.1,0.9-2,2-2h5.4c0.5,0,1,0.2,1.4,0.6l2.1,2.1C14.8,4.8,15,5.3,15,5.9
		v8.4C15,15.4,14.1,16.3,13,16.3z M5.5,2.8c-0.6,0-1,0.4-1,1v10.5c0,0.6,0.4,1,1,1H13c0.6,0,1-0.4,1-1V5.9c0-0.3-0.1-0.5-0.3-0.7
		L11.6,3c-0.2-0.2-0.4-0.3-0.7-0.3H5.5z"></path>
	<path d="M6.3,7.3C6,7.3,5.8,7,5.8,6.8V4.5C5.8,4.2,6,4,6.3,4s0.5,0.2,0.5,0.5v2.2C6.8,7,6.6,7.3,6.3,7.3z"></path>
	<path d="M8.5,7.3C8.3,7.3,8,7,8,6.8V4.5C8,4.2,8.3,4,8.5,4S9,4.2,9,4.5v2.2C9,7,8.8,7.3,8.5,7.3z"></path>
	<path d="M10.8,7.3c-0.3,0-0.5-0.2-0.5-0.5V4.5c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v2.2C11.3,7,11.1,7.3,10.8,7.3z"></path>
          </svg>
        </span>
        </span><span id="rec-remove" title="移除" style="position: absolute;top: -16px;right: -10px;display: none;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15"><circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7"></circle><rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1"></rect><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1"></line><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5"></line></svg></span></span></div></div><div id="playWind" style="width: 1137px; height: 733px;"><div class="parent-wnd" style="overflow:hidden;width:100%; height:100%; position: relative;"><div style="float:left; background-color: #000000; position: relative; width: 1137px; height: 733px;"><canvas id="canvas0" class="play-window" wid="0" width="1137" height="733" style="width: 1137px; height: 733px; transform: rotate(0deg); transform-origin: 0px 0px;"></canvas><img style="display:none;" id="playImg0" src=""><canvas id="canvas_draw0" class="draw-window" style="position: absolute; top: 0px; left: 0px; border: 1px solid rgb(255, 204, 0); cursor: default;" wid="0" width="1135" height="731"></canvas></div></div></div>
<div class="ez-ptz-wrap" id="ez-ptz-item" style="display: none;">
    <div class="ez-ptz-container" id="ez-ptz-container">
        <div class="ez-ptz-main center"></div>
        <div class="ez-ptz-icon top active"></div>
        <div class="ez-ptz-icon left active"></div>
        <div class="ez-ptz-icon bottom active"></div>
        <div class="ez-ptz-icon right active"></div>
    </div>
    <!-- <div class="ez-ptz-close" id="ez-ptz-close">
      <svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>关闭</title>
        <defs>
          <filter id="filter-1">
            <feColorMatrix in="SourceGraphic" type="matrix"
              values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
          </filter>
        </defs>
        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="Web端-直播-编辑状态" transform="translate(-657.000000, -569.000000)">
            <g id="矩形-2" transform="translate(255.000000, 312.500000)">
              <g id="编组-4" transform="translate(0.517885, 46.000000)">
                <g id="关闭" transform="translate(402.450687, 211.094680)">
                  <circle id="椭圆形" fill-opacity="0.801136364" fill="#000000" cx="7" cy="7" r="7"></circle>
                  <g filter="url(#filter-1)" id="icons/close">
                    <g transform="translate(2.916667, 2.916667)" id="Icon/Close/Dark">
                      <rect id="Rectangle" x="0" y="0" width="8.07837838" height="8.07837838"></rect>
                      <line x1="1.50079465" y1="1.50079465" x2="6.57758373" y2="6.57758373" id="Line" stroke="#2C2C2C"
                        stroke-width="0.583333333" stroke-linecap="round"></line>
                      <line x1="1.50079465" y1="6.57758373" x2="6.57758373" y2="1.50079465" id="Line-2" stroke="#2C2C2C"
                        stroke-width="0.583333333" stroke-linecap="round"></line>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </svg>
    </div> -->
</div>
<div class="ez-iframe-footer-container" id="ez-iframe-footer-container">
    <div id="audioControls" class="audio-controls" style="display: flex;justify-content: space-between;background-image: linear-gradient(
180deg, rgba(0,0,0,0) 0%, #00000065 80%);"><div class="audio-controls-left" id="audioControls-left" style="display: flex;justify-content: space-between;"><span id="play" style="position:relative;margin-left: 12px;" class="active"><span id="play-left" title="左移" style="position: absolute;top: calc(50% - 10px);left: -6px;display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080;"><path d="M7.4,10V5.3c0-0.3-0.3-0.6-0.6-0.6c-0.1,0-0.3,0.1-0.4,0.2L3.7,7.4c-0.2,0.2-0.3,0.6,0,0.8 c0,0,0,0,0.1,0.1l2.7,2.2c0.2,0.2,0.6,0.2,0.8-0.1C7.3,10.3,7.4,10.2,7.4,10z"></path></svg></span><span id="play-content" title="播放/结束播放"><span style="fill: rgb(255, 255, 255);"><svg style="display: block; fill: rgb(255, 255, 255);" width="48" height="48" fill="#FFFFFF" viewBox="-6 -6 32 32">
              <path id="Stroke-1" class="st1" d="M10.5,1.7c-4.9,0-8.8,4-8.8,8.8s4,8.8,8.8,8.8s8.8-4,8.8-8.8S15.4,1.7,10.5,1.7z M10.5,2.7
                c4.3,0,7.8,3.5,7.8,7.8s-3.5,7.8-7.8,7.8s-7.8-3.5-7.8-7.8S6.2,2.7,10.5,2.7z"></path>
              <path class="st2" d="M8.7,8C9,8,9.3,8.3,9.3,8.6v3.8C9.3,12.7,9,13,8.7,13C8.3,13,8,12.7,8,12.4V8.6C8,8.3,8.3,8,8.7,8z"></path>
              <path id="Rectangle-Copy-10" class="st2" d="M12.8,8c0.3,0,0.6,0.3,0.6,0.6v3.8c0,0.3-0.3,0.6-0.6,0.6c-0.3,0-0.6-0.3-0.6-0.6V8.6
                C12.2,8.3,12.5,8,12.8,8z"></path>
            </svg><svg fill="#FFFFFF" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32" style="display: none;"><path d="M13,9.8L10.1,8C9.9,7.9,9.7,7.9,9.5,7.9c-0.6,0-1,0.4-1,1v3.7c0,0.2,0.1,0.4,0.2,0.5c0.3,0.5,0.9,0.6,1.4,0.3 l2.9-1.8c0.1-0.1,0.2-0.2,0.3-0.3C13.6,10.7,13.4,10.1,13,9.8z"></path><path d="M10.5,1.9c-4.9,0-8.8,4-8.8,8.8c0,4.9,4,8.8,8.8,8.8s8.8-4,8.8-8.8C19.4,5.8,15.4,1.9,10.5,1.9z M10.5,18.5 c-4.3,0-7.8-3.5-7.8-7.8s3.5-7.8,7.8-7.8c4.3,0,7.8,3.5,7.8,7.8S14.9,18.5,10.5,18.5z"></path></svg></span></span><span id="play-right" title="右移" style="position: absolute;top: calc(50% - 10px);left: calc(100% - 6px);display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080"><path d="M3.4,5.2v4.7c0,0.3,0.3,0.6,0.6,0.6c0.1,0,0.3-0.1,0.4-0.2l2.7-2.5c0.2-0.2,0.3-0.6,0-0.8 c0,0,0,0-0.1-0.1L4.4,4.8C4.1,4.6,3.8,4.6,3.6,4.9C3.5,5,3.4,5.1,3.4,5.2z"></path></svg></span><span id="play-remove" title="移除" style="position: absolute;top: -16px;left: calc(100% - 10px);display: none;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15"><circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7"></circle><rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1"></rect><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1"></line><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5"></line></svg></span></span><span id="capturePicture" style="position:relative;margin-left: 12px;"><span id="capturePicture-left" title="左移" style="position: absolute;top: calc(50% - 10px);left: -6px;display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080;"><path d="M7.4,10V5.3c0-0.3-0.3-0.6-0.6-0.6c-0.1,0-0.3,0.1-0.4,0.2L3.7,7.4c-0.2,0.2-0.3,0.6,0,0.8 c0,0,0,0,0.1,0.1l2.7,2.2c0.2,0.2,0.6,0.2,0.8-0.1C7.3,10.3,7.4,10.2,7.4,10z"></path></svg></span><span id="capturePicture-content" title="截图"><svg fill="#FFFFFF" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32"><path d="M10.8,7.7c-2,0-3.7,1.6-3.7,3.7S8.7,15,10.8,15c2,0,3.7-1.6,3.7-3.7S12.8,7.7,10.8,7.7z M10.8,8.7c1.5,0,2.7,1.2,2.7,2.7S12.2,14,10.8,14c-1.5,0-2.7-1.2-2.7-2.7S9.3,8.7,10.8,8.7z"></path><path d="M8.6,3.7l-0.1,0C8,3.7,7.7,4,7.5,4.3l-1,1.7l-1.3,0C4,6.1,3.1,7,3.1,8.2v7.1 c0,1.2,0.9,2.1,2.1,2.1h11.1c1.2,0,2.1-0.9,2.1-2.1V8.2l0-0.1c-0.1-1.1-1-1.9-2.1-1.9l-1.3,0l-1.1-1.8c-0.2-0.4-0.7-0.6-1.1-0.6H8.6 z M8.6,4.7h4.2c0.1,0,0.2,0.1,0.3,0.1l1.2,2c0.1,0.2,0.3,0.2,0.4,0.2h1.6c0.6,0,1.1,0.5,1.1,1.1v7.1c0,0.6-0.5,1.1-1.1,1.1H5.1 c-0.6,0-1.1-0.5-1.1-1.1V8.2c0-0.6,0.5-1.1,1.1-1.1h1.6c0.2,0,0.3-0.1,0.4-0.2l1.2-2C8.4,4.7,8.5,4.7,8.6,4.7z"></path></svg></span><span id="capturePicture-right" title="右移" style="position: absolute;top: calc(50% - 10px);left: calc(100% - 6px);display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080"><path d="M3.4,5.2v4.7c0,0.3,0.3,0.6,0.6,0.6c0.1,0,0.3-0.1,0.4-0.2l2.7-2.5c0.2-0.2,0.3-0.6,0-0.8 c0,0,0,0-0.1-0.1L4.4,4.8C4.1,4.6,3.8,4.6,3.6,4.9C3.5,5,3.4,5.1,3.4,5.2z"></path></svg></span><span id="capturePicture-remove" title="移除" style="position: absolute;top: -16px;left: calc(100% - 10px);display: none;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15"><circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7"></circle><rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1"></rect><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1"></line><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5"></line></svg></span></span><span id="sound" style="position:relative;margin-left: 12px;" class="active"><span id="sound-left" title="左移" style="position: absolute;top: calc(50% - 10px);left: -6px;display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080;"><path d="M7.4,10V5.3c0-0.3-0.3-0.6-0.6-0.6c-0.1,0-0.3,0.1-0.4,0.2L3.7,7.4c-0.2,0.2-0.3,0.6,0,0.8 c0,0,0,0,0.1,0.1l2.7,2.2c0.2,0.2,0.6,0.2,0.8-0.1C7.3,10.3,7.4,10.2,7.4,10z"></path></svg></span><span id="sound-content" title="声音"><span style="fill: rgb(255, 255, 255);"><svg style="display:none" fill="#FFFFFF" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32">
            <path d="M8.5,4.2c0.8-0.7,2.1-0.2,2.2,0.9l0,0.1v10c0,1.1-1.2,1.7-2.1,1.1l-0.1-0.1l-3.3-2.8C5,13.2,5,12.9,5.1,12.7 c0.2-0.2,0.4-0.2,0.6-0.1l0.1,0.1l3.3,2.8c0.2,0.2,0.5,0.1,0.5-0.2l0-0.1v-10c0-0.3-0.3-0.4-0.5-0.3L9.2,5L5.9,7.8 C5.6,7.9,5.3,7.9,5.1,7.7C5,7.5,5,7.3,5.1,7.1L5.2,7L8.5,4.2z"></path>
            <path d="M5.5,6.9C5.8,6.9,6,7.1,6,7.4c0,0.2-0.2,0.4-0.4,0.5l-0.1,0h-2C3.4,7.9,3.3,8,3.2,8.2l0,0.1v4 c0,0.2,0.1,0.3,0.3,0.3l0.1,0h2C5.8,12.5,6,12.7,6,13c0,0.2-0.2,0.4-0.4,0.5l-0.1,0h-2c-0.7,0-1.3-0.5-1.3-1.2l0-0.1v-4 c0-0.7,0.5-1.3,1.2-1.3l0.1,0H5.5z"></path>
            <path d="M17.4,7.9c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.4,0.1,0.6l-0.1,0.1l-3.8,3.8c-0.2,0.2-0.5,0.2-0.7,0 c-0.2-0.2-0.2-0.4-0.1-0.6l0.1-0.1L17.4,7.9z"></path>
            <path d="M13.7,7.9c0.2-0.2,0.4-0.2,0.6-0.1l0.1,0.1l3.8,3.8c0.2,0.2,0.2,0.5,0,0.7c-0.2,0.2-0.4,0.2-0.6,0.1l-0.1-0.1 l-3.7-3.8C13.5,8.4,13.5,8.1,13.7,7.9z"></path>
            </svg><svg style="display:block" width="48" height="48" fill="#FFFFFF" viewBox="-6 -6 32 32">
              <path d="M13.2,7.1c0.1-0.2,0.5-0.3,0.7-0.2c1.1,0.7,1.9,2.2,1.9,3.7c0,1.6-0.7,3-1.9,3.7
                c-0.2,0.1-0.5,0.1-0.7-0.2c-0.1-0.2-0.1-0.5,0.2-0.7c0.8-0.5,1.4-1.6,1.4-2.9c0-1.3-0.6-2.4-1.4-2.9C13.1,7.6,13,7.3,13.2,7.1z"></path>
              <path d="M15.7,4.5c0.2-0.2,0.5-0.2,0.7-0.1C18,5.8,19,8.2,19,10.7c0,2.5-1,4.8-2.7,6.3
                c-0.2,0.2-0.5,0.2-0.7-0.1c-0.2-0.2-0.2-0.5,0.1-0.7c1.4-1.2,2.3-3.3,2.3-5.5c0-2.2-0.9-4.3-2.3-5.5C15.5,5,15.5,4.7,15.7,4.5z"></path>
              <path id="Stroke-5" class="st1" d="M8.5,4.7c0.8-0.7,2.1-0.2,2.2,0.9l0,0.1v10c0,1.1-1.2,1.7-2.1,1.1l-0.1-0.1l-3.3-2.8
                C5,13.7,5,13.4,5.1,13.2c0.2-0.2,0.4-0.2,0.6-0.1l0.1,0.1l3.3,2.8c0.2,0.2,0.5,0.1,0.5-0.2l0-0.1v-10c0-0.3-0.3-0.4-0.5-0.3l-0.1,0
                L5.9,8.3C5.6,8.4,5.3,8.4,5.1,8.2C5,8,5,7.7,5.1,7.6l0.1-0.1L8.5,4.7z"></path>
              <path d="M5.5,7.4C5.8,7.4,6,7.6,6,7.9c0,0.2-0.2,0.4-0.4,0.5l-0.1,0h-2c-0.2,0-0.3,0.1-0.3,0.3l0,0.1v4
                c0,0.2,0.1,0.3,0.3,0.3l0.1,0h2C5.8,13,6,13.2,6,13.5c0,0.2-0.2,0.4-0.4,0.5l-0.1,0h-2c-0.7,0-1.3-0.5-1.3-1.2l0-0.1v-4
                c0-0.7,0.5-1.3,1.2-1.3l0.1,0H5.5z"></path>
            </svg></span></span><span id="sound-right" title="右移" style="position: absolute;top: calc(50% - 10px);left: calc(100% - 6px);display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080"><path d="M3.4,5.2v4.7c0,0.3,0.3,0.6,0.6,0.6c0.1,0,0.3-0.1,0.4-0.2l2.7-2.5c0.2-0.2,0.3-0.6,0-0.8 c0,0,0,0-0.1-0.1L4.4,4.8C4.1,4.6,3.8,4.6,3.6,4.9C3.5,5,3.4,5.1,3.4,5.2z"></path></svg></span><span id="sound-remove" title="移除" style="position: absolute;top: -16px;left: calc(100% - 10px);display: none;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15"><circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7"></circle><rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1"></rect><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1"></line><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5"></line></svg></span></span><span id="pantile" style="position:relative;margin-left: 12px;"><span id="pantile-left" title="左移" style="position: absolute;top: calc(50% - 10px);left: -6px;display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080;"><path d="M7.4,10V5.3c0-0.3-0.3-0.6-0.6-0.6c-0.1,0-0.3,0.1-0.4,0.2L3.7,7.4c-0.2,0.2-0.3,0.6,0,0.8 c0,0,0,0,0.1,0.1l2.7,2.2c0.2,0.2,0.6,0.2,0.8-0.1C7.3,10.3,7.4,10.2,7.4,10z"></path></svg></span><span id="pantile-content" title="云台控制"><svg fill="#FFFFFF" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32"><path d="M10.2,7.8c1.6,0,2.9,1.3,2.9,2.9s-1.3,2.9-2.9,2.9s-2.9-1.3-2.9-2.9S8.5,7.8,10.2,7.8z M10.2,8.8c-1.1,0-1.9,0.9-1.9,1.9s0.9,1.9,1.9,1.9s1.9-0.9,1.9-1.9S11.2,8.8,10.2,8.8z"></path><path d="M8.8,3.5c0.7-0.6,1.8-0.6,2.5-0.1l0.1,0.1l1.4,1.1c0.2,0.2,0.3,0.5,0.1,0.7 c-0.2,0.2-0.4,0.2-0.6,0.1l-0.1,0l-1.4-1.1C10.5,3.9,10,3.9,9.6,4.2L9.4,4.3L8,5.4C7.8,5.5,7.5,5.5,7.3,5.3c-0.2-0.2-0.1-0.5,0-0.6 l0.1-0.1L8.8,3.5z"></path><path d="M2.5,12.3c-0.6-0.7-0.6-1.8-0.1-2.5l0.1-0.1l1.1-1.4c0.2-0.2,0.5-0.3,0.7-0.1 c0.2,0.2,0.2,0.4,0.1,0.6l0,0.1l-1.1,1.4C3,10.6,3,11.1,3.2,11.5l0.1,0.1L4.4,13c0.2,0.2,0.1,0.5-0.1,0.7c-0.2,0.2-0.5,0.1-0.6,0 l-0.1-0.1L2.5,12.3z"></path><path d="M17.7,12.3c0.6-0.7,0.6-1.8,0.1-2.5l-0.1-0.1l-1.1-1.4c-0.2-0.2-0.5-0.3-0.7-0.1 c-0.2,0.2-0.2,0.4-0.1,0.6l0,0.1l1.1,1.4c0.3,0.4,0.3,0.9,0.1,1.3l-0.1,0.1L15.8,13c-0.2,0.2-0.1,0.5,0.1,0.7c0.2,0.2,0.5,0.1,0.6,0 l0.1-0.1L17.7,12.3z"></path><path d="M8.8,18.2c0.7,0.6,1.8,0.6,2.5,0.1l0.1-0.1l1.4-1.1c0.2-0.2,0.3-0.5,0.1-0.7 c-0.2-0.2-0.4-0.2-0.6-0.1l-0.1,0l-1.4,1.1c-0.4,0.3-0.9,0.3-1.3,0.1l-0.1-0.1L8,16.3c-0.2-0.2-0.5-0.1-0.7,0.1 c-0.2,0.2-0.1,0.5,0,0.6l0.1,0.1L8.8,18.2z"></path></svg></span><span id="pantile-right" title="右移" style="position: absolute;top: calc(50% - 10px);left: calc(100% - 6px);display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080"><path d="M3.4,5.2v4.7c0,0.3,0.3,0.6,0.6,0.6c0.1,0,0.3-0.1,0.4-0.2l2.7-2.5c0.2-0.2,0.3-0.6,0-0.8 c0,0,0,0-0.1-0.1L4.4,4.8C4.1,4.6,3.8,4.6,3.6,4.9C3.5,5,3.4,5.1,3.4,5.2z"></path></svg></span><span id="pantile-remove" title="移除" style="position: absolute;top: -16px;left: calc(100% - 10px);display: none;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15"><circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7"></circle><rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1"></rect><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1"></line><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5"></line></svg></span></span><span id="recordvideo" style="position:relative;margin-left: 12px;"><span id="recordvideo-left" title="左移" style="position: absolute;top: calc(50% - 10px);left: -6px;display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080;"><path d="M7.4,10V5.3c0-0.3-0.3-0.6-0.6-0.6c-0.1,0-0.3,0.1-0.4,0.2L3.7,7.4c-0.2,0.2-0.3,0.6,0,0.8 c0,0,0,0,0.1,0.1l2.7,2.2c0.2,0.2,0.6,0.2,0.8-0.1C7.3,10.3,7.4,10.2,7.4,10z"></path></svg></span><span id="recordvideo-content" title="录屏"><svg fill="#FFFFFF" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32"><path d="M11.6,5.3H4.7c-1.4,0-2.5,1.1-2.5,2.5v5.9c0,1.4,1.1,2.5,2.5,2.5h6.9c1.4,0,2.5-1.1,2.5-2.5V7.7 C14.1,6.4,13,5.3,11.6,5.3z M4.7,6.3h6.9c0.8,0,1.5,0.7,1.5,1.5v5.9c0,0.8-0.7,1.5-1.5,1.5H4.7c-0.8,0-1.5-0.7-1.5-1.5V7.7 C3.3,6.9,3.9,6.3,4.7,6.3z"></path><path d="M16.6,6.7c0.9-0.8,2.3-0.1,2.4,1l0,0.1v5.7c0,1.2-1.3,1.9-2.3,1.2l-0.1-0.1L13.3,12 c-0.2-0.2-0.2-0.5-0.1-0.7c0.2-0.2,0.4-0.2,0.6-0.1l0.1,0.1l3.3,2.7c0.3,0.2,0.7,0.1,0.8-0.3l0-0.1V7.8c0-0.4-0.4-0.6-0.7-0.4 l-0.1,0l-3.3,2.7c-0.2,0.2-0.5,0.1-0.7-0.1c-0.2-0.2-0.1-0.5,0-0.6l0.1-0.1L16.6,6.7z"></path></svg></span><span id="recordvideo-right" title="右移" style="position: absolute;top: calc(50% - 10px);left: calc(100% - 6px);display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080"><path d="M3.4,5.2v4.7c0,0.3,0.3,0.6,0.6,0.6c0.1,0,0.3-0.1,0.4-0.2l2.7-2.5c0.2-0.2,0.3-0.6,0-0.8 c0,0,0,0-0.1-0.1L4.4,4.8C4.1,4.6,3.8,4.6,3.6,4.9C3.5,5,3.4,5.1,3.4,5.2z"></path></svg></span><span id="recordvideo-remove" title="移除" style="position: absolute;top: -16px;left: calc(100% - 10px);display: none;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15"><circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7"></circle><rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1"></rect><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1"></line><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5"></line></svg></span></span><span id="talk" style="position:relative;margin-left: 12px;"><span id="talk-left" title="左移" style="position: absolute;top: calc(50% - 10px);left: -6px;display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080;"><path d="M7.4,10V5.3c0-0.3-0.3-0.6-0.6-0.6c-0.1,0-0.3,0.1-0.4,0.2L3.7,7.4c-0.2,0.2-0.3,0.6,0,0.8 c0,0,0,0,0.1,0.1l2.7,2.2c0.2,0.2,0.6,0.2,0.8-0.1C7.3,10.3,7.4,10.2,7.4,10z"></path></svg></span><span id="talk-content" title="对讲"><div></div><svg fill="#FFFFFF" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32"><path d="M10.1,2.7C8.5,2.7,7.2,4,7.2,5.6v5.2c0,1.6,1.3,2.9,2.9,2.9l0.2,0c1.5-0.1,2.7-1.4,2.7-2.9V5.6	C13,4,11.7,2.7,10.1,2.7z M10.1,3.7c1.1,0,1.9,0.9,1.9,1.9v5.2c0,1-0.8,1.8-1.8,1.9l-0.1,0c-1,0-1.9-0.9-1.9-1.9V5.6 C8.2,4.5,9,3.7,10.1,3.7z"></path><path d="M15.1,8.5c0.2,0,0.4,0.2,0.5,0.4l0,0.1v1.7c0,3-2.5,5.5-5.5,5.5c-3,0-5.4-2.3-5.5-5.3l0-0.2V9 c0-0.3,0.2-0.5,0.5-0.5c0.2,0,0.4,0.2,0.5,0.4l0,0.1v1.7c0,2.5,2,4.5,4.5,4.5c2.4,0,4.4-1.9,4.5-4.3l0-0.2V9 C14.6,8.7,14.8,8.5,15.1,8.5z"></path><path d="M13.5,17.7c0.3,0,0.5,0.2,0.5,0.5c0,0.2-0.2,0.4-0.4,0.5l-0.1,0h-7c-0.3,0-0.5-0.2-0.5-0.5 c0-0.2,0.2-0.4,0.4-0.5l0.1,0H13.5z"></path><path d="M10.1,15.2c0.2,0,0.4,0.2,0.5,0.4l0,0.1v2.5c0,0.3-0.2,0.5-0.5,0.5c-0.2,0-0.4-0.2-0.5-0.4l0-0.1 v-2.5C9.6,15.4,9.8,15.2,10.1,15.2z"></path></svg></span><span id="talk-right" title="右移" style="position: absolute;top: calc(50% - 10px);left: calc(100% - 6px);display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080"><path d="M3.4,5.2v4.7c0,0.3,0.3,0.6,0.6,0.6c0.1,0,0.3-0.1,0.4-0.2l2.7-2.5c0.2-0.2,0.3-0.6,0-0.8 c0,0,0,0-0.1-0.1L4.4,4.8C4.1,4.6,3.8,4.6,3.6,4.9C3.5,5,3.4,5.1,3.4,5.2z"></path></svg></span><span id="talk-remove" title="移除" style="position: absolute;top: -16px;left: calc(100% - 10px);display: none;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15"><circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7"></circle><rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1"></rect><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1"></line><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5"></line></svg></span></span></div><div class="audio-controls-right" id="audioControls-right" style="display: flex;justify-content: space-between;"><span id="hd" style="position:relative;margin-right: 12px;"><span id="hd-left" title="左移" style="position: absolute;top: calc(50% - 10px);left: -6px;display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080;"><path d="M7.4,10V5.3c0-0.3-0.3-0.6-0.6-0.6c-0.1,0-0.3,0.1-0.4,0.2L3.7,7.4c-0.2,0.2-0.3,0.6,0,0.8 c0,0,0,0,0.1,0.1l2.7,2.2c0.2,0.2,0.6,0.2,0.8-0.1C7.3,10.3,7.4,10.2,7.4,10z"></path></svg></span><span id="hd-content" title="画面清晰度"><ul id="hdSelect" class="select" style="display:none;"><li class="selectOption" name="option" id="select-hd">高清</li><li class="selectOption" name="option" id="select-sd">标清</li></ul><span><svg fill="#FFFFFF" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32" style="display: none;"><path d="M17.4,16.5H3.1c-0.8,0-1.4-0.6-1.4-1.4V5.4c0-0.9,0.7-1.6,1.6-1.6h14.1c0.8,0,1.4,0.6,1.4,1.4v9.8 C18.8,15.9,18.2,16.5,17.4,16.5z M3.3,5C3.1,5,2.9,5.2,2.9,5.4v9.7c0,0.2,0.1,0.3,0.3,0.3h14.3c0.2,0,0.3-0.1,0.3-0.3V5.3 c0-0.2-0.1-0.3-0.3-0.3H3.3z"></path><path d="M13.3,13.6h-1.6c-0.4,0-0.7-0.3-0.7-0.7V7.4c0-0.4,0.3-0.7,0.7-0.7h1.6c1.2,0,2.2,1,2.2,2.2v2.4 C15.6,12.6,14.6,13.6,13.3,13.6z M12.2,12.5h1.1c0.6,0,1.1-0.5,1.1-1.1V9c0-0.6-0.5-1.1-1.1-1.1h-1.1V12.5z"></path><path d="M5.5,13.6c-0.3,0-0.6-0.2-0.6-0.6V7.3C5,7,5.2,6.8,5.5,6.8S6.1,7,6.1,7.3v5.7C6.1,13.4,5.8,13.6,5.5,13.6z"></path><path d="M9.2,13.6c-0.3,0-0.6-0.2-0.6-0.6V7.3c0-0.3,0.2-0.6,0.6-0.6S9.8,7,9.8,7.3v5.7C9.8,13.4,9.5,13.6,9.2,13.6z"></path><rect x="5.6" y="9.6" width="3.6" height="1.1"></rect></svg><svg style="display: block;" fill="#FFFFFF" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -8 40 44">
                <path d="M24.1,23.8h-20c-1.1,0-1.9-0.9-1.9-1.9V8.4c0-1.2,1-2.2,2.1-2.2h19.7c1.1,0,1.9,0.9,1.9,1.9v13.8
                    C26,23,25.1,23.8,24.1,23.8z M4.3,7.7C4,7.7,3.7,8,3.7,8.4v13.5c0,0.2,0.2,0.4,0.4,0.4h20c0.2,0,0.4-0.2,0.4-0.4V8.2
                    c0-0.2-0.2-0.4-0.4-0.4H4.3z"></path>
                <path d="M18.4,19.8h-2.2c-0.5,0-0.9-0.4-0.9-0.9v-7.8c0-0.5,0.4-0.9,0.9-0.9h2.2c1.7,0,3.1,1.4,3.1,3.1v3.3
                C21.5,18.4,20.1,19.8,18.4,19.8z M16.7,18.3h1.6c0.9,0,1.6-0.7,1.6-1.6v-3.3c0-0.9-0.7-1.6-1.6-1.6h-1.6V18.3z"></path>
                <path d="M10.5,19.8c1.2,0,2.1-0.3,2.7-0.9c0.6-0.6,0.9-1.3,0.9-2.1c0-0.8-0.3-1.4-0.9-1.8c-0.4-0.2-1.1-0.5-2.2-0.8
                    l0,0l-1-0.2c-0.4-0.1-0.8-0.2-1-0.4c-0.4-0.2-0.6-0.5-0.6-0.9c0-0.4,0.1-0.6,0.4-0.9s0.7-0.3,1.3-0.3c0.8,0,1.4,0.2,1.8,0.6
                    c0.2,0.3,0.3,0.6,0.4,0.9l0,0h1.4c0-0.6-0.2-1.1-0.5-1.6c-0.6-0.8-1.6-1.2-2.9-1.2c-1,0-1.8,0.3-2.4,0.8c-0.6,0.5-0.9,1.2-0.9,2
                    c0,0.7,0.3,1.3,1,1.7c0.4,0.2,0.9,0.4,1.7,0.6l0,0l1.2,0.3c0.6,0.2,1.1,0.3,1.3,0.4c0.3,0.2,0.5,0.5,0.5,0.9c0,0.5-0.2,0.9-0.6,1.1
                    s-0.9,0.4-1.5,0.4c-0.9,0-1.6-0.2-2-0.7c-0.2-0.3-0.3-0.6-0.4-1.1l0,0H6.8c0,0.9,0.3,1.6,0.9,2.2C8.2,19.5,9.2,19.8,10.5,19.8z"></path>
                <defs>
                  <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="15.2" y="10.3" width="6.2" height="9.5">
                    <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"></feColorMatrix>
                  </filter>
                </defs>
                <mask maskUnits="userSpaceOnUse" x="15.2" y="10.3" width="6.2" height="9.5" id="mask-2_2_">
                  <g class="st2">
                    <path id="path-1_2_" class="st3" d="M24.1,23.1h-20c-0.6,0-1.2-0.5-1.2-1.2V8.2C2.9,7.5,3.5,7,4.1,7h19.7c0.8,0,1.4,0.6,1.4,1.4
                      v13.5C25.2,22.6,24.7,23.1,24.1,23.1z"></path>
                  </g>
                </mask>
                <defs>
                  <filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="6.8" y="10.3" width="7.3" height="9.5">
                    <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"></feColorMatrix>
                  </filter>
                </defs>
                <mask maskUnits="userSpaceOnUse" x="6.8" y="10.3" width="7.3" height="9.5" id="mask-2_3_">
                  <g class="st5">
                    <path id="path-1_3_" class="st3" d="M24.1,23.1h-20c-0.6,0-1.2-0.5-1.2-1.2V8.2C2.9,7.5,3.5,7,4.1,7h19.7c0.8,0,1.4,0.6,1.4,1.4
                      v13.5C25.2,22.6,24.7,23.1,24.1,23.1z"></path>
                  </g>
                </mask>
                </svg>
                </span></span><span id="hd-right" title="右移" style="position: absolute;top: calc(50% - 10px);left: calc(100% - 6px);display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080"><path d="M3.4,5.2v4.7c0,0.3,0.3,0.6,0.6,0.6c0.1,0,0.3-0.1,0.4-0.2l2.7-2.5c0.2-0.2,0.3-0.6,0-0.8 c0,0,0,0-0.1-0.1L4.4,4.8C4.1,4.6,3.8,4.6,3.6,4.9C3.5,5,3.4,5.1,3.4,5.2z"></path></svg></span><span id="hd-remove" title="移除" style="position: absolute;top: -16px;left: calc(100% - 10px);display: none;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15"><circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7"></circle><rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1"></rect><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1"></line><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5"></line></svg></span></span><span id="webExpend" style="position:relative;margin-right: 12px;"><span id="webExpend-left" title="左移" style="position: absolute;top: calc(50% - 10px);left: -6px;display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080;"><path d="M7.4,10V5.3c0-0.3-0.3-0.6-0.6-0.6c-0.1,0-0.3,0.1-0.4,0.2L3.7,7.4c-0.2,0.2-0.3,0.6,0,0.8 c0,0,0,0,0.1,0.1l2.7,2.2c0.2,0.2,0.6,0.2,0.8-0.1C7.3,10.3,7.4,10.2,7.4,10z"></path></svg></span><span id="webExpend-content" title="网页全屏"><span><svg fill="#FFFFFF" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32"><path d="M3.1,7.6c-0.3,0-0.5-0.2-0.5-0.5V5.3c0-1.2,1-2.3,2.2-2.3h1.8c0.3,0,0.5,0.2,0.5,0.5S6.8,4.1,6.6,4.1H4.8 c-0.7,0-1.2,0.6-1.2,1.3v1.8C3.6,7.4,3.3,7.6,3.1,7.6z"></path><path d="M15.3,18.1h-1.8c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h1.8c0.7,0,1.2-0.6,1.2-1.2v-1.8 c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v1.8C17.6,17.1,16.6,18.1,15.3,18.1z"></path><circle class="st2" cx="10.2" cy="10.4" r="1.1"></circle></svg><svg fill="#FFFFFF" style="display:none;" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32">
            <path class="st1" d="M5.4,8.1H3.5C3.2,8.1,3,7.9,3,7.6s0.2-0.5,0.5-0.5h1.9c0.8,0,1.4-0.6,1.4-1.4V3.8c0-0.3,0.2-0.5,0.5-0.5
              s0.5,0.2,0.5,0.5v1.9C7.7,7,6.7,8.1,5.4,8.1z"></path>
            <path class="st1" d="M13.1,17.7c-0.3,0-0.5-0.2-0.5-0.5v-1.9c0-1.3,1.1-2.4,2.4-2.4h1.9c0.3,0,0.5,0.2,0.5,0.5s-0.2,0.5-0.5,0.5H15
              c-0.8,0-1.4,0.6-1.4,1.4v1.9C13.6,17.4,13.4,17.7,13.1,17.7z"></path>
              <circle class="st2" cx="10.2" cy="10.4" r="1.1"></circle>
            </svg></span></span><span id="webExpend-right" title="右移" style="position: absolute;top: calc(50% - 10px);left: calc(100% - 6px);display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080"><path d="M3.4,5.2v4.7c0,0.3,0.3,0.6,0.6,0.6c0.1,0,0.3-0.1,0.4-0.2l2.7-2.5c0.2-0.2,0.3-0.6,0-0.8 c0,0,0,0-0.1-0.1L4.4,4.8C4.1,4.6,3.8,4.6,3.6,4.9C3.5,5,3.4,5.1,3.4,5.2z"></path></svg></span><span id="webExpend-remove" title="移除" style="position: absolute;top: -16px;left: calc(100% - 10px);display: none;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15"><circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7"></circle><rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1"></rect><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1"></line><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5"></line></svg></span></span><span id="expend" style="position:relative;margin-right: 12px;"><span id="expend-left" title="左移" style="position: absolute;top: calc(50% - 10px);left: -6px;display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080;"><path d="M7.4,10V5.3c0-0.3-0.3-0.6-0.6-0.6c-0.1,0-0.3,0.1-0.4,0.2L3.7,7.4c-0.2,0.2-0.3,0.6,0,0.8 c0,0,0,0,0.1,0.1l2.7,2.2c0.2,0.2,0.6,0.2,0.8-0.1C7.3,10.3,7.4,10.2,7.4,10z"></path></svg></span><span id="expend-content" title="全局全屏"><span><svg fill="#FFFFFF" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32"><path d="M3.4,7.6c-0.3,0-0.5-0.2-0.5-0.5V5.3c0-1.2,1-2.3,2.2-2.3h1.8c0.3,0,0.5,0.2,0.5,0.5S7.2,4.1,6.9,4.1H5.2 c-0.7,0-1.2,0.6-1.2,1.3v1.8C3.9,7.4,3.7,7.6,3.4,7.6z"></path><path d="M6.9,18.1H5.2c-1.2,0-2.2-1-2.2-2.2v-1.8c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v1.8c0,0.7,0.6,1.2,1.2,1.2 h1.8c0.3,0,0.5,0.2,0.5,0.5S7.2,18.1,6.9,18.1z"></path><path d="M15.7,18.1h-1.8c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h1.8c0.7,0,1.2-0.6,1.2-1.2v-1.8 c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v1.8C17.9,17.1,16.9,18.1,15.7,18.1z"></path><path d="M17.4,7.6c-0.3,0-0.5-0.2-0.5-0.5V5.3c0-0.7-0.6-1.3-1.2-1.3h-1.8c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h1.8 c1.2,0,2.2,1,2.2,2.3v1.8C17.9,7.4,17.7,7.6,17.4,7.6z"></path></svg><svg style="display:none" width="48" height="48" fill="#FFFFFF" viewBox="-6 -6 32 32">
              <path class="st1" d="M5.7,8.1H3.9c-0.3,0-0.6-0.2-0.6-0.6S3.6,7,3.9,7h1.9c0.7,0,1.3-0.6,1.3-1.3V3.8c0-0.3,0.2-0.6,0.6-0.6
                s0.6,0.2,0.6,0.6v1.9C8.2,7,7.1,8.1,5.7,8.1z"></path>
              <path class="st1" d="M7.6,17.7c-0.3,0-0.6-0.2-0.6-0.6v-1.9c0-0.7-0.6-1.3-1.3-1.3H3.9c-0.3,0-0.6-0.2-0.6-0.6s0.2-0.6,0.6-0.6h1.9
                c1.3,0,2.4,1.1,2.4,2.4v1.9C8.2,17.5,7.9,17.7,7.6,17.7z"></path>
              <path class="st1" d="M13.4,17.7c-0.3,0-0.6-0.2-0.6-0.6v-1.9c0-1.3,1.1-2.4,2.4-2.4h1.9c0.3,0,0.6,0.2,0.6,0.6S17.5,14,17.2,14
                h-1.9c-0.7,0-1.3,0.6-1.3,1.3v1.9C14,17.5,13.8,17.7,13.4,17.7z"></path>
              <path class="st1" d="M17.2,8.1h-1.9c-1.3,0-2.4-1.1-2.4-2.4V3.8c0-0.3,0.2-0.6,0.6-0.6S14,3.5,14,3.8v1.9C14,6.4,14.6,7,15.3,7h1.9
                c0.3,0,0.6,0.2,0.6,0.6S17.5,8.1,17.2,8.1z"></path>
            </svg>
            </span></span><span id="expend-right" title="右移" style="position: absolute;top: calc(50% - 10px);left: calc(100% - 6px);display: none;"><svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080"><path d="M3.4,5.2v4.7c0,0.3,0.3,0.6,0.6,0.6c0.1,0,0.3-0.1,0.4-0.2l2.7-2.5c0.2-0.2,0.3-0.6,0-0.8 c0,0,0,0-0.1-0.1L4.4,4.8C4.1,4.6,3.8,4.6,3.6,4.9C3.5,5,3.4,5.1,3.4,5.2z"></path></svg></span><span id="expend-remove" title="移除" style="position: absolute;top: -16px;left: calc(100% - 10px);display: none;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15"><circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7"></circle><rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1"></rect><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1"></line><line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5"></line></svg></span></span></div></div>
    <div id="canvas-container" style="display:none">
        <canvas id="canvas" class="time-line-body" height="48px" width="1000px" style="display:inline-block;">
            该浏览器不支持canvas
        </canvas>
        <div class="timeline-controls">
            <div class="timeline-controls-scale">
          <span style="vertical-Align: middle" id="timeline-scale-add">
            <svg fill="#2C2C2C" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
              <title>add</title>
              <g>
                <polygon points="0.1,0.5 15,0.5 15,15.4 0.1,15.4 	"></polygon>
              </g>
              <g>
                <path d="M7.6,12.4c-0.3,0-0.5-0.2-0.5-0.5v-8c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v8C8.1,12.2,7.9,12.4,7.6,12.4z"></path>
              </g>
              <g>
                <path d="M11.6,8.4h-8c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h8c0.3,0,0.5,0.2,0.5,0.5S11.8,8.4,11.6,8.4z"></path>
              </g>
            </svg>
          </span>
                <span style="vertical-align:middle" id="timeline-scale-sub">
            <svg fill="#2C2C2C" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
              <title>reduce</title>
              <g>
                <polygon class="st0" points="1,0.8 15.2,0.8 15.2,15 1,15 	"></polygon>
              </g>
              <g>
                <path class="st1" d="M12.1,8.4h-8c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h8c0.3,0,0.5,0.2,0.5,0.5S12.4,8.4,12.1,8.4z"></path>
              </g>
            </svg>
          </span>
            </div>
            <label for="datepicker">
                <div class="timeline-controls-date">
            <span>
              <svg fill="#2C2C2C" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                <title>ifttt</title>
                <g id="Rectangle">
                  <rect x="0.6" y="0.9" class="st0" width="20" height="20"></rect>
                </g>
                <g id="Stroke-1">
                  <path class="st1" d="M14,7.2c-0.3,0-0.5-0.2-0.5-0.5V3.4c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.3C14.5,7,14.2,7.2,14,7.2z"></path>
                </g>
                <g id="Stroke-3">
                  <path class="st1" d="M7.3,7.2C7,7.2,6.8,7,6.8,6.7V3.4c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.3C7.8,7,7.6,7.2,7.3,7.2z"></path>
                </g>
                <g id="Stroke-5">
                  <path class="st1" d="M18.1,9.7h-15c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h15c0.3,0,0.5,0.2,0.5,0.5S18.4,9.7,18.1,9.7z"></path>
                </g>
                <g id="Stroke-7">
                  <path class="st1" d="M16.5,19.7H4.8c-1.2,0-2.2-1-2.2-2.2V6.7c0-1.2,1-2.2,2.2-2.2h11.7c1.2,0,2.2,1,2.2,2.2v10.8
  C18.6,18.8,17.7,19.7,16.5,19.7z M4.8,5.6c-0.6,0-1.2,0.5-1.2,1.2v10.8c0,0.6,0.5,1.2,1.2,1.2h11.7c0.6,0,1.2-0.5,1.2-1.2V6.7
  c0-0.6-0.5-1.2-1.2-1.2H4.8z"></path>
                </g>
                <g id="Stroke-9">
                  <path class="st1" d="M10.6,13.3c-0.4,0-0.7-0.3-0.7-0.7c0-0.2,0.1-0.4,0.2-0.5s0.3-0.2,0.5-0.2h0h0c0.4,0,0.7,0.3,0.7,0.7
  S11,13.3,10.6,13.3z"></path>
                </g>
                <g id="Stroke-11">
                  <path class="st1" d="M14.8,13.3c-0.4,0-0.7-0.3-0.7-0.7c0-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.3-0.2,0.5-0.2c0.4,0,0.7,0.3,0.7,0.7
  S15.2,13.3,14.8,13.3z M14.8,12.3c-0.2,0-0.3,0.1-0.3,0.3c0,0.2,0.3,0.4,0.5,0.2c0.1-0.1,0.1-0.1,0.1-0.2
  C15.1,12.4,15,12.3,14.8,12.3z"></path>
                </g>
                <g id="Stroke-13">
                  <path class="st1" d="M6.5,16.6c-0.4,0-0.7-0.3-0.7-0.7c0-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.3-0.2,0.5-0.2h0h0c0.4,0,0.7,0.3,0.7,0.7
  C7.2,16.3,6.9,16.6,6.5,16.6z"></path>
                </g>
                <g id="Stroke-15">
                  <path class="st1" d="M10.6,16.6c-0.4,0-0.7-0.3-0.7-0.7c0-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.3-0.2,0.5-0.2h0h0c0.4,0,0.7,0.3,0.7,0.7
  C11.4,16.3,11,16.6,10.6,16.6z"></path>
                </g>
              </svg>
            </span>
                </div>
            </label>
            <input data-toggle="datepicker" id="datepicker" name="datepicker" style="opacity:0;width:0;margin-left:-4">
        </div>
    </div>
</div>
<div id="audioleft" style="display: none;"></div>
<div id="audioright" style="display: none;"></div>
<div id="time-area"><span class="dot"></span><span class="value">00:00</span></div>
<script>
    var domain = "https://open.ys7.com";
    if (getQueryString("env") === 'test12') {
        domain = "https://test12open.ys7.com";
    }
    let themeData = [{ "areaName": "footer", "backgroundColor": "#00000065", "color": "#FFFFFF", "activeColor": "#FFFFFF", "btnList": [{ "btnKey": "ade5d065a113432e8091a1c5bc819c57-footer-0", "iconId": "play", "part": "left", "defaultActive": 1, "memo": "播放", "isrender": 1 }, { "btnKey": "ade5d065a113432e8091a1c5bc819c57-footer-1", "iconId": "capturePicture", "part": "left", "defaultActive": 0, "memo": "截屏按钮", "isrender": 1 }, { "btnKey": "ade5d065a113432e8091a1c5bc819c57-footer-2", "iconId": "sound", "part": "left", "defaultActive": 1, "memo": "声音按钮", "isrender": 1 }, { "btnKey": "ade5d065a113432e8091a1c5bc819c57-footer-3", "iconId": "pantile", "part": "left", "defaultActive": 0, "memo": "云台控制按钮", "isrender": 1 }, { "btnKey": "ade5d065a113432e8091a1c5bc819c57-footer-4", "iconId": "recordvideo", "part": "left", "defaultActive": 0, "memo": "录制按钮", "isrender": 1 }, { "btnKey": "ade5d065a113432e8091a1c5bc819c57-footer-5", "iconId": "talk", "part": "left", "defaultActive": 0, "memo": "对讲按钮", "isrender": 1 }, { "btnKey": "ade5d065a113432e8091a1c5bc819c57-footer-6", "iconId": "hd", "part": "right", "defaultActive": 0, "memo": "清晰度切换按钮", "isrender": 1 }, { "btnKey": "ade5d065a113432e8091a1c5bc819c57-footer-7", "iconId": "webExpend", "part": "right", "defaultActive": 0, "memo": "网页全屏按钮", "isrender": 1 }, { "btnKey": "ade5d065a113432e8091a1c5bc819c57-footer-8", "iconId": "expend", "part": "right", "defaultActive": 0, "memo": "全局全屏按钮", "isrender": 1 }], "defaultActiveBtn": ["play", "sound"] }, { "areaName": "header", "backgroundColor": "#000000", "color": "#FFFFFF", "activeColor": null, "btnList": [{ "btnKey": "ade5d065a113432e8091a1c5bc819c57-header-0", "iconId": "deviceID", "part": "left", "defaultActive": 0, "memo": "顶部设备名称", "isrender": 1 }, { "btnKey": "ade5d065a113432e8091a1c5bc819c57-header-1", "iconId": "deviceName", "part": "left", "defaultActive": 0, "memo": "顶部设备ID", "isrender": 1 }, { "btnKey": "ade5d065a113432e8091a1c5bc819c57-header-1", "iconId": "cloudRec", "part": "right", "defaultActive": 0, "memo": "顶部设备ID", "isrender": 1 }, { "btnKey": "ade5d065a113432e8091a1c5bc819c57-header-3", "iconId": "rec", "part": "right", "defaultActive": 0, "memo": "顶部设备ID", "isrender": 1 }], "defaultActiveBtn": [] }];
    var isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
    if (getQueryString("isMobile") === '1') {
        isMobile = true;
    }
    var decoderState = {
        state: {
            isEditing: false,
            playing: true,
            openSound: true,
            recording: false,
            recordTimer: null,
            recordCount: "00:00",
            talking: false,
            ptzing: false,
            hding: false,
            expending: false,
            webExpending: false,
            url: getQueryString("url"),
        }
    };
    var url = getQueryString("url");
    var accessToken = getQueryString("accessToken");
    var begin = getQueryString("begin");
    var end = getQueryString("end");
    var autoplay = 1;
    var audioId = 0;
    var templete = getQueryString("templete") == "1" ? "1" : "0";
    var deviceSerial = url.split("/")[3];
    var channelNo = url.split("/")[4].split(".")[0];
    var validCode = url.split("/")[2].split("@").length === 2 ? url.split("/")[2].split("@")[0] : "";
    var deviceName = "C6C";
    var userId = "";
    var autoFocus = 0;
    var autoFocusing = false;
    fetchThemeData();
    function fetchThemeData() {
        //fetch('http://y.ys7.com:3100/console/jssdk/ezopen/getDeviceSerial',{
        fetch('https://open.ys7.com/console/jssdk/ezopen/getDeviceSerial',{
            method: 'POST',
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            body: `accessToken=${accessToken}`
        })
            .then(response => response.json())
            .then(data => {
                console.log("get theme data", data);
                if (data.retcode === 0 && data.data && data.data.length > 0) {
                    if(data.data[0] && data.data[0].btnList.length>0) {
                        EZUIKit.params.footer = data.data[0];
                        themeData[0] = data.data[0]
                        btnReRender(data.data[0]);
                    }
                    if(data.data[1] && data.data[1].btnList.length>0) {
                        EZUIKit.params.header = data.data[1];
                        btnReRender(data.data[1]);
                        themeData[1] = data.data[1];
                    }
                    // 判断是否自动隐藏控件
                    if (themeData[0].autoFocus > 0) {
                        autoFocus = parseInt(themeData[0].autoFocus);
                    }
                    init();
                } else {
                    btnReRender(themeData[0]);
                    btnReRender(themeData[1]);
                    init();
                }
            })
            .catch(error => {
                console.error('Error:', error)
                init();
            });
    }
    function setThemeData(accessToken, header, footer) {
        const setThemeSuccess = (data) => {
            console.log("set theme data", data);
            fetchThemeData();
        }
        const setThemeError = (err) => {
            console.log("get theme err", err);
        }
        request("https://open.ys7.com/console/jssdk/ezopen/saveDeviceSerial", 'POST', {
            //request("http://y.ys7.com:3100/console/jssdk/ezopen/saveDeviceSerial", 'POST', {
            accessToken: accessToken,
            header: JSON.stringify(header),
            footer: JSON.stringify(footer)
        }, '', setThemeSuccess, setThemeError);
    }
    EZUIKit.opt = {
        accessToken: accessToken,
        deviceSerial: deviceSerial,
        channelNo: channelNo,
        url: url,
    }
    EZUIKit.params = { footer: themeData[0], header: themeData[1] };
    getDeviceInfo();

    function setDecoderState(options) {
        Object.keys(options).map((item, index) => {
            switch (item) {
                case 'playing':
                    // document.getElementById("play").className= options[item] ? 'active' : '';
                    // document.getElementById("play-content").childNodes[0].style.fill =  options[item] ? EZUIKit.params.footer.activeColor : "#FFFFFF";
                    if (options[item]) {
                        if(document.getElementById("play")){
                            document.getElementById("play-content").children[0].children[0].style = "display:block";
                            document.getElementById("play-content").children[0].children[1].style = "display:none";
                            document.getElementById("play").className = options[item] ? 'active' : '';
                            document.getElementById("play-content").childNodes[0].children[0].style.fill = options[item] ? EZUIKit.params.footer.color.split('-')[0] : EZUIKit.params.footer.color.split('-')[0];
                        }
                    } else {
                        if(document.getElementById("play")){
                            document.getElementById("play-content").children[0].children[1].style = "display:block";
                            document.getElementById("play-content").children[0].children[0].style = "display:none";
                        }
                    }
                    break;
                case 'ptzing':
                    if(document.getElementById("pantile")){
                        document.getElementById("pantile").className = options[item] ? 'active' : '';
                        document.getElementById("pantile-content").childNodes[0].style.fill = options[item] ? EZUIKit.params.footer.activeColor.split('-')[0] : EZUIKit.params.footer.color.split('-')[0];
                    }
                    break
                case 'recording':
                    if(document.getElementById("recordvideo")){
                        document.getElementById("recordvideo").className = options[item] ? 'active' : '';
                        document.getElementById("recordvideo-content").childNodes[0].style.fill = options[item] ? EZUIKit.params.footer.activeColor.split('-')[0] : EZUIKit.params.footer.color.split('-')[0];
                    }
                    // 定时器处理
                    if (options[item]) {
                        countTime('add', 0)
                        decoderState.state.recordTimer = setInterval(() => {
                        }, 1000);
                    } else {
                        countTime('destroy', 0)
                        clearInterval(decoderState.state.recordTimer);
                    }
                    break
                case 'talking':
                    if(document.getElementById("talk")){
                        document.getElementById("talk").className = options[item] ? 'active' : '';
                        document.getElementById("talk-content").childNodes[1].style.fill = options[item] ? EZUIKit.params.footer.activeColor : EZUIKit.params.footer.color.split('-')[0];
                    }
                    break;
                case 'openSound':
                    // document.getElementById("sound").className = options[item] ? 'active' : '';
                    // document.getElementById("sound-content").childNodes[0].style.fill = options[item] ? EZUIKit.params.footer.activeColor : "#FFFFFF";
                    if(document.getElementById("sound")){
                        if (options[item]) {
                            document.getElementById("sound-content").children[0].children[1].style = "display:block";
                            document.getElementById("sound-content").children[0].children[0].style = "display:none";
                            document.getElementById("sound").className = options[item] ? 'active' : '';
                            document.getElementById("sound-content").childNodes[0].children[0].style.fill = options[item] ? EZUIKit.params.footer.color.split('-')[0] : EZUIKit.params.footer.color.split('-')[0];

                        } else {
                            document.getElementById("sound-content").children[0].children[0].style = "display:block";
                            document.getElementById("sound-content").children[0].children[1].style = "display:none";
                        }
                    }
                    break;
                case 'hding':
                    if (options[item]) {
                        if(document.getElementById("hd")){
                            document.getElementById("hd-content").children[1].children[0].style = "display:block";
                            document.getElementById("hd-content").children[1].children[1].style = "display:none";
                            document.getElementById("hd").className = options[item] ? 'active' : '';
                            document.getElementById("hd-content").children[1].children[0].style.fill = options[item] ? EZUIKit.params.footer.color.split('-')[0] : EZUIKit.params.footer.color.split('-')[0];
                        }
                    } else {
                        if(document.getElementById("hd")){
                            document.getElementById("hd-content").children[1].children[1].style = "display:block";
                            document.getElementById("hd-content").children[1].children[0].style = "display:none";
                        }
                    }
                    break;
                case 'type':
                    if (options[item] === 'live') {
                        document.getElementById("canvas-container").style.display = 'none';
                        document.getElementById("headerControls-right").style.display = 'none';
                        $('#datepicker').datepicker('hide');
                    } else if (options[item] === 'cloud.rec') {
                        // var newUrl = decoder.changePlayUrl({ type: 'cloud.rec' });
                        // url = newUrl;
                        if (!isMobile) {
                            initTimeLine();
                            syncTimeLine();
                            clickEventHandle('cloudRec');
                        }
                    } else if (options[item] === 'rec') {
                        // var newUrl = decoder.changePlayUrl({ type: 'rec' });
                        // url = newUrl;
                        if (!isMobile) {
                            initTimeLine();
                            syncTimeLine();
                            clickEventHandle('rec');
                        }
                    }
                    break;
                case 'expending':
                    if (options[item]) {
                        if(document.getElementById("expend")){
                            document.getElementById("expend-content").children[0].children[1].style = "display:block";
                            document.getElementById("expend-content").children[0].children[0].style = "display:none";
                        }
                        if (isMobile) {
                            if (!decoderState.state.ptzing && decoderState.state.url.indexOf("rec") === -1) {
                                document.getElementById("pantile-content").click();
                            }
                        }
                        // 网站全屏置灰
                        if(document.getElementById("webExpend")){
                            document.getElementById("webExpend").className="disabled";
                        }
                    } else {
                        if(document.getElementById("expend")){
                            document.getElementById("expend-content").children[0].children[0].style = "display:block";
                            document.getElementById("expend-content").children[0].children[1].style = "display:none";
                        }
                        if (isMobile) {
                            if (decoderState.state.ptzing && decoderState.state.url.indexOf("rec") === -1) {
                                document.getElementById("pantile-content").click();
                            }
                        }
                        // 网站全屏置灰
                        if(document.getElementById("webExpend")){
                            document.getElementById("webExpend").className="";
                        }
                    }
                    break;
                case 'webExpending':
                    if (options[item]) {
                        if(document.getElementById("webExpend")){
                            document.getElementById("webExpend-content").children[0].children[1].style = "display:block";
                            document.getElementById("webExpend-content").children[0].children[0].style = "display:none";
                        }
                        // 全屏置灰
                        if(document.getElementById("expend")){
                            document.getElementById("expend").className="disabled";
                        }
                    } else {
                        if(document.getElementById("webExpend")){
                            document.getElementById("webExpend-content").children[0].children[0].style = "display:block";
                            document.getElementById("webExpend-content").children[0].children[1].style = "display:none";
                        }
                        // 全屏置灰
                        if(document.getElementById("expend")){
                            document.getElementById("expend").className="";
                        }
                    }
                    break;
            }
            Object.assign(decoderState.state, options);
        })
    }
    getDeviceInfo();
    function getDeviceInfo() {
        function deviceAPISuccess(data) {
            if (data.code == 200 && data.data) {
                // 设备序列号
                deviceName = data.data.deviceName;
                if(document.getElementById("deviceName-content")) {
                    document.getElementById("deviceName-content").innerHTML = data.data.deviceName;
                }
            }
        }
        function devbiceAPIError(error) {
            console.log("获取设备信息失败", error);
        }
        request(domain + '/api/lapp/device/info', 'POST', { accessToken: accessToken, deviceSerial: deviceSerial }, '', deviceAPISuccess, devbiceAPIError);

    }
    // $(function () {
    var id = getQueryString("id");
    var iframeParentUrl = getParentUrl();
    function handleError(e) {
        console.log("捕获到错误", e);
        window.parent.postMessage({ id: id, type: 'handleError', code: e.retcode || e.code || -1, data: e }, iframeParentUrl);
        decoderState.state.playing = false;
        // log(JSON.stringify(e),'error');
        //alert(e)
    }
    function handleSuccess() {
        console.log("播放成功回调函数，此处可执行播放成功后续动作");
        window.parent.postMessage({ id: id, type: 'handleSuccess', code: 0 }, iframeParentUrl);
        if (getQueryString("bSupporDoubleClickFull") == 0) {
            decoder.jSPlugin.JS_SetCanFullScreen(false);
        }
        setDecoderState({ playing: true });
        if (!isMobile && url.indexOf("rec") !== -1) {
            syncTimeLine();
            timeLine.unReadOnly();
        }
        reSizeByControls();
        if (autoFocus > 0) {
            startAutoFocus();
        }
    }
    function handleStop() {
        setDecoderState({ playing: false })
        console.log("停止播放");
        // UI控件
    }
    // init();

    // var validCode = getQueryString('validCode');
    if (begin) url += "?begin=" + begin;
    if (end) url += "&end=" + end;
    var width = document.documentElement.clientWidth;
    var height = document.documentElement.clientHeight;

    function init() {
        try {
            if (decoder && decoder.getOSDTime) {
                decoder.getOSDTime().then(() => {
                    decoder.stop();
                })
            }
        } catch (e) {
            console.log("E", e);
        }
        setTimeout(() => {
            decoder = new EZUIKit.EZUIPlayer({
                id: "playWind",
                autoplay: autoplay == 1,
                audioId: audioId,
                url: url,
                accessToken: accessToken,
                decoderPath: "/assets/ezuikit_v3.6/",
                decoderVersion: getQueryString('decoderVersion'),
                width: width,
                height: height - 48 * 1,
                handleError: handleError,
                handleSuccess: handleSuccess,
                handleStop: handleStop,
                env: {
                    domain: domain
                }
                // loading: {svg: '<svg t="1567688443823" class="icon" viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1560" width="64" height="64"><path d="M490.766 47.13C247.531 67.91 50.692 251.203 10.699 494.152c-10.701 64.999-9.326 99.794 5.062 128.192 44.677 88.182 170.83 87.708 214.77-0.805 10.384-20.912 12.048-31.802 11.744-76.871-0.801-118.767 51.882-218.607 149.086-282.532 201.695-132.639 476.291-24.392 545.849 215.177 70.275 242.029-107.591 493.681-364.481 515.682-25.367 2.174-18.056 3.428 16.083 2.757 310.027-6.081 520.19-314.986 418.493-615.128-72.561-214.16-287.678-353.047-516.54-333.493z" fill="#ffffff" p-id="1561"></path></svg>'},
            });
            window.onresize = function () {
                decoder.reSize(document.documentElement.clientWidth || width || 600, document.documentElement.clientHeight || height || 400);
            }
        }, 100);
        // 延时函数 -- iframe未加载完成，宽高获取不到
        if (getQueryString("header") === 'false') {
            hideHeader();
        }
        // 高清标清
        setDecoderState({
            hding: url.indexOf(".hd") !== -1
        })
    }
    // });
    /**
     * @description 按钮向左移动
     * @param _this 调用该方法的对象
     * @param targetDOMID 要移动的按钮的id
     */
    function moveToLeft(_this, targetDOMID) {
        const dom = document.getElementById(targetDOMID);
        for (var i = 0; i < dom.childNodes.length; i++) {
            if (_this.id.indexOf(dom.childNodes[i].id) > -1) {
                if (i === 0) {
                    console.log('该图标已经在首位');
                    return;
                }

                const tmp0 = document.createElement('div');
                const tmp1 = dom.childNodes[i];
                const tmp2 = dom.childNodes[i - 1];
                dom.replaceChild(tmp0, tmp1);
                dom.replaceChild(tmp1, tmp2);
                dom.replaceChild(tmp2, tmp0);
                // if (EZUIKit.params.onRemoveCallback) {
                //   const oldList = EZUIKit.params.footer.btnList;
                //   var newList = [];
                //   const result = [];
                //   const parentDOM = dom.parentElement;
                //   // 获取最新的按钮id顺序
                //   for (var i = 0; i < parentDOM.childNodes.length; i++) {
                //     const tmpDOM = parentDOM.childNodes[i];
                //     for (let j = 0; j < tmpDOM.childNodes.length; j++) {
                //       newList.push(tmpDOM.childNodes[j].id);
                //     }
                //   }
                //   // 根据id顺序对btnList重新排列，同时更新order字段
                //   for (var i = 0; i < newList.length; i++) {
                //     const index = oldList.findIndex(j => j.id === newList[i]);
                //     const keyArr = oldList[index].btnKey.split('-');
                //     if (index > -1) {
                //       result.push(Object.assign(oldList[index], { btnKey: `${keyArr[0]}-${keyArr[1]}-${i}` }));
                //     }
                //   }
                //   EZUIKit.params.footer.btnList = result;
                //   EZUIKit.params.onMoveBtnCallback('footer', EZUIKit.params.footer);
                // }
                return;
            }
        }
    }
    /**
     * @description 按钮向右移动
     * @param _this 调用该方法的对象
     * @param targetDOMID 要移动的按钮的id
     */
    function moveToRight(_this, targetDOMID) {
        const dom = document.getElementById(targetDOMID);
        for (var i = 0; i < dom.childNodes.length; i++) {
            if (_this.id.indexOf(dom.childNodes[i].id) > -1) {
                if (i === dom.childNodes.length - 1) {
                    console.log('该图标已经在末尾');
                    return;
                }

                const tmp0 = document.createElement('div');
                const tmp1 = dom.childNodes[i];
                const tmp2 = dom.childNodes[i + 1];
                dom.replaceChild(tmp0, tmp2);
                dom.replaceChild(tmp2, tmp1);
                dom.replaceChild(tmp1, tmp0);
                // if (EZUIKit.params.onRemoveCallback) {
                //   const oldList = EZUIKit.params.footer.btnList;
                //   var newList = [];
                //   const result = [];
                //   const parentDOM = dom.parentElement;
                //   // 获取最新的按钮id顺序
                //   for (var i = 0; i < parentDOM.childNodes.length; i++) {
                //     const tmpDOM = parentDOM.childNodes[i];
                //     for (let j = 0; j < tmpDOM.childNodes.length; j++) {
                //       newList.push(tmpDOM.childNodes[j].id);
                //     }
                //   }
                //   // 根据id顺序对btnList重新排列
                //   for (var i = 0; i < newList.length; i++) {
                //     const index = oldList.findIndex(j => j.id === newList[i]);
                //     const keyArr = oldList[index].btnKey.split('-');
                //     if (index > -1) {
                //       result.push(Object.assign(oldList[index], { btnKey: `${keyArr[0]}-${keyArr[1]}-${i}` }));
                //     }
                //   }
                //   EZUIKit.params.footer.btnList = result;
                //   EZUIKit.params.onMoveBtnCallback('footer', EZUIKit.params.footer);
                // }
                return;
            }
        }
    }
    /**
     * @description 移除按钮
     * @param _this 调用该方法的对象
     * @param targetDOMID 要移除的按钮的id
     */
    function removeBtn(_this, targetDOMID) {
        const dom = document.getElementById(targetDOMID);
        for (var i = 0; i < dom.childNodes.length; i++) {
            if (_this.id.indexOf(dom.childNodes[i].id) > -1) {
                window.parent.postMessage({ id: getQueryString("id"), type: 'removeEventHandle', data: {area:targetDOMID.indexOf('head') > -1 ? 'header' : 'footer' ,id:dom.childNodes[i].id }, code: 0 }, getParentUrl());
                dom.childNodes[i].parentNode.removeChild(dom.childNodes[i]);
                for (var i = 0; i < EZUIKit.params.footer.btnList.length; i++) {
                    if (EZUIKit.params.footer.btnList[i].iconId === _this.id) {
                        EZUIKit.params.footer.btnList[i].isrender = 0;
                    }
                }
                return;
            }
        }
    }
    /**
     * 模板模块
     *
     **/
    const headBtnDict = [
        {
            id: 'deviceName',
            title: '设备名称',
            domString: deviceName,
            onremove(part) {
                console.log('移除设备名称');
                removeBtn(this, `headerControls-${part}`);
            },
        },
        {
            id: 'deviceID',
            title: '序列号',
            domString: deviceSerial,
            onremove(part) {
                console.log('移除序列号');
                removeBtn(this, `headerControls-${part}`);
            },
        },
        {
            id: 'cloudRec',
            title: '云存储',
            domString: `
        <span>
          <svg fill=${EZUIKit.params.footer.activeColor.split('-')[0]} version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="2 0 20 20">
	<path d="M9.5,13.1c-0.3,0-0.5-0.2-0.5-0.5V8.8c0-0.3,0.2-0.5,0.5-0.5S10,8.5,10,8.8v3.8C10,12.8,9.8,13.1,9.5,13.1z"/>
	<path d="M7.6,10.6c-0.1,0-0.3-0.1-0.4-0.2C7,10.2,7,9.9,7.3,9.7l1.9-1.7c0.2-0.2,0.5-0.2,0.7,0l1.8,1.7
		c0.2,0.2,0.2,0.5,0,0.7c-0.2,0.2-0.5,0.2-0.7,0L9.5,9.1l-1.6,1.4C7.8,10.6,7.7,10.6,7.6,10.6z"/>
	<path d="M13.2,15.7H5.6c-2.1-0.1-3.8-1.8-3.8-3.9c0-1.8,1.3-3.4,3-3.8c0.4-2.2,2.3-3.9,4.6-3.9c2.3,0,4.2,1.7,4.6,3.8
		c1.8,0.4,3.1,1.9,3.1,3.8C17.1,13.9,15.4,15.7,13.2,15.7z M5.6,14.7h7.6c1.6,0,2.9-1.3,2.9-2.9c0-1.5-1.1-2.7-2.6-2.9l-0.4,0l0-0.4
		c-0.2-1.9-1.7-3.3-3.6-3.3C7.5,5.1,6,6.6,5.8,8.5l0,0.4l-0.4,0c-1.4,0.2-2.5,1.4-2.5,2.9C2.8,13.3,4.1,14.6,5.6,14.7z"/>
          </svg>
        </span>
        `,
            onremove(part) {
                console.log('移除序列号');
                removeBtn(this, `header-controls-${part}`);
            },
            onclick() {
                console.log("点击云回放");
                setDecoderState({
                    type: 'cloud.rec'
                });
                var newUrl = decoder.changePlayUrl({ type: 'cloud.rec' });
                url = newUrl;
                if (!isMobile) {
                    initTimeLine();
                    syncTimeLine();
                    clickEventHandle('cloudRec');
                }
            }
        },
        {
            id: 'rec',
            title: '本地存储',
            domString: `
        <span>
          <svg fill=${EZUIKit.params.footer.color.split('-')[0]} version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="2 0 20 20">
            <path d="M13,16.3H5.5c-1.1,0-2-0.9-2-2V3.8c0-1.1,0.9-2,2-2h5.4c0.5,0,1,0.2,1.4,0.6l2.1,2.1C14.8,4.8,15,5.3,15,5.9
		v8.4C15,15.4,14.1,16.3,13,16.3z M5.5,2.8c-0.6,0-1,0.4-1,1v10.5c0,0.6,0.4,1,1,1H13c0.6,0,1-0.4,1-1V5.9c0-0.3-0.1-0.5-0.3-0.7
		L11.6,3c-0.2-0.2-0.4-0.3-0.7-0.3H5.5z"/>
	<path d="M6.3,7.3C6,7.3,5.8,7,5.8,6.8V4.5C5.8,4.2,6,4,6.3,4s0.5,0.2,0.5,0.5v2.2C6.8,7,6.6,7.3,6.3,7.3z"/>
	<path d="M8.5,7.3C8.3,7.3,8,7,8,6.8V4.5C8,4.2,8.3,4,8.5,4S9,4.2,9,4.5v2.2C9,7,8.8,7.3,8.5,7.3z"/>
	<path d="M10.8,7.3c-0.3,0-0.5-0.2-0.5-0.5V4.5c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v2.2C11.3,7,11.1,7.3,10.8,7.3z"
		/>
          </svg>
        </span>
        `,
            onremove(part) {
                console.log('移除序列号');
                removeBtn(this, `header-controls-${part}`);
            },
            onclick() {
                console.log("点击本地回放");
                setDecoderState({
                    type: 'rec'
                });
                var newUrl = decoder.changePlayUrl({ type: 'rec' });
                url = newUrl;
                if (!isMobile) {
                    initTimeLine();
                    syncTimeLine();
                    clickEventHandle('rec');
                }
            }
        },
    ];
    /** ******** 渲染header START ********* */
    let matchHeaderOptList = [];// 顶部按钮列表
    /**
     * @description 遍历传入的header，同时用于判断某个id是否在渲染队列中
     * @param {*} template 播放模式
     * @param {*} header 按钮列表
     * @param {*} obj 需要判断的对象id，若不传则直接返回result数组
     */
    function matchHeaderOpt(template, header, obj) {
        const result = [];
        if (header.btnList && header.btnList instanceof Array) {
            result.push({ headerContainer: true });
            for (const item of header.btnList) {
                result.push(item);
            }
        }
        if (obj) {
            // 传入obj时，判断该obj是否在result中
            return result.findIndex(i => i[obj] === true) > -1;
        }

        // 不传入obj则直接返回result
        return result;
    }
    /**
     * @description 给domObj添加删除的操作按钮
     * @param domObj 需要处理的dom元素（string）
     * @returns 挂载了删除按钮的dom元素（string）
     */
    function editHeaderBtnHOC(domObj, part) {
        let editSVG;// 编辑按钮组合dom
        let objE;// 临时存储对象
        let dom;// 处理后得到的的dom
        editSVG = `${`<span id="${domObj.id}" style="position:relative;${part === 'left' ? 'margin-left: 12px;' : 'margin-right: 12px;'}">`
            + `<span id="${domObj.id}-content">`}${domObj.domString
            }</span>`
            + `<span id="${domObj.id}-remove" title="移除" style="position: absolute;top: -16px;right: -10px;display: none;">`
            + '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15">'
            + '<circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7" />'
            + '<rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1" />'
            + '<line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1" />'
            + '<line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5" />'
            + '</svg>'
            + '</span>'
            + '</span>';
        objE = document.createElement('div');
        objE.innerHTML = editSVG;
        dom = objE.childNodes[0];
        // 绑定事件，[1]：移除按钮dom
        if (domObj.onremove) {
            dom.childNodes[1].onclick = () => domObj.onremove(part);
        }
        if (domObj.onclick) {
            dom.childNodes[0].onclick = domObj.onclick;
        }
        return dom;
    }
    function renderNewHeaderOpt(targetDOM, btnDict, header) {
        targetDOM.setAttribute('style', `background:${header.backgroundColor.split('-')[0]};color:${header.color.split('-')[0]};`);
        const targetDOMLeft = document.createElement('div');
        targetDOMLeft.setAttribute('class', 'header-controls-left');
        targetDOMLeft.setAttribute('id', 'headerControls-left');
        targetDOMLeft.setAttribute('style', 'display: flex;justify-content: space-between;');
        const targetDOMRight = document.createElement('div');
        targetDOMRight.setAttribute('class', 'header-controls-right');
        targetDOMRight.setAttribute('id', 'headerControls-right');
        targetDOMRight.setAttribute('style', 'justify-content: space-between;');
        targetDOM.appendChild(targetDOMLeft);
        targetDOM.appendChild(targetDOMRight);
        for (var i = 0; i < matchHeaderOptList.length; i++) {
            btnDict.map((item) => {
                if (item.id === matchHeaderOptList[i].iconId && matchHeaderOptList[i].isrender) {
                    console.log(editHeaderBtnHOC(item, 'left'))
                    if (matchHeaderOptList[i].part === 'left') {
                        targetDOMLeft.appendChild(editHeaderBtnHOC(item, 'left'));
                    } else if (matchHeaderOptList[i].part === 'right') {
                        if(!isMobile){
                            targetDOMRight.appendChild(editHeaderBtnHOC(item, 'right'));
                        }
                    }
                }
            });
        }
        if (decoderState.state.url.indexOf("rec") === -1) {
            document.getElementById("headerControls-right").style.display = 'none';
        } else {
            if (document.getElementById("cloudRec-content")) {
                document.getElementById("cloudRec-content").children[0].children[0].style.fill = url.indexOf('cloud') !== -1 ? EZUIKit.params.footer.activeColor.replace('-diy', "") : EZUIKit.params.footer.color.replace('-diy', "");
            }
            if (document.getElementById("rec-content")) {
                document.getElementById("rec-content").children[0].children[0].style.fill = url.indexOf('cloud') !== -1 ?  EZUIKit.params.footer.color.replace('-diy', "") : EZUIKit.params.footer.activeColor.replace('-diy', "");
            }
        }
    }

    matchHeaderOptList = matchHeaderOpt('simple', themeData[1]);// 顶部按钮列表
    if (matchHeaderOpt('simple', themeData[1], 'headerContainer')) {
        // 顶部容器
        const headerContainer = document.createElement('div');
        headerContainer.setAttribute('id', 'headControl');
        headerContainer.setAttribute('class', 'head-message');
        document.body.insertBefore(headerContainer, document.getElementById("playWind"));
        renderNewHeaderOpt(headerContainer, headBtnDict, themeData[1]);
    }

    /** ******** 渲染header END *********** */
    function _pantileHide() {
        document.getElementById("ez-ptz-item").style = "display:none";
        setDecoderState({
            ptzing: false,
        })
    }
    function _pantileShow() {
        document.getElementById("ez-ptz-item").style = "display:block";
        setDecoderState({
            ptzing: true,
        })
    }

    /** ******** 渲染footer START *********** */
    let matchFooterOptList = [];
    /**
     * @description 按钮字典
     * @param id 按钮的唯一标识，需要与footer传入的对应
     * @param title 鼠标悬浮时展示的标题
     * @param domString 按钮的svg图标
     * @param onclick 按钮点击事件
     * @param onmoveleft 按钮左移事件
     * @param onmoveright 按钮右移事件
     * @param onremove 移除按钮事件
     */
        // var EZUIKit = {
        //   state: {
        //     isEditing: false,
        //   }
        // }
    const getFooterBtnDict = function (_this, footer) {
            // 由于需要调用实例的方法，生成底部按钮列表字典时需传入实例对象_this
            return [
                {
                    id: 'play',
                    title: '播放/结束播放',
                    domString: (
                        '<span>'+
                        `<svg style="display:none" width="48" height="48" fill="${footer.color.split('-')[0]}" viewBox="-6 -6 32 32">
              <path id="Stroke-1" class="st1" d="M10.5,1.7c-4.9,0-8.8,4-8.8,8.8s4,8.8,8.8,8.8s8.8-4,8.8-8.8S15.4,1.7,10.5,1.7z M10.5,2.7
                c4.3,0,7.8,3.5,7.8,7.8s-3.5,7.8-7.8,7.8s-7.8-3.5-7.8-7.8S6.2,2.7,10.5,2.7z"/>
              <path class="st2" d="M8.7,8C9,8,9.3,8.3,9.3,8.6v3.8C9.3,12.7,9,13,8.7,13C8.3,13,8,12.7,8,12.4V8.6C8,8.3,8.3,8,8.7,8z"/>
              <path id="Rectangle-Copy-10" class="st2" d="M12.8,8c0.3,0,0.6,0.3,0.6,0.6v3.8c0,0.3-0.3,0.6-0.6,0.6c-0.3,0-0.6-0.3-0.6-0.6V8.6
                C12.2,8.3,12.5,8,12.8,8z"/>
            </svg>`
                        +
                        `<svg fill="${footer.color.split('-')[0]}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32">` +
                        '<path d="M13,9.8L10.1,8C9.9,7.9,9.7,7.9,9.5,7.9c-0.6,0-1,0.4-1,1v3.7c0,0.2,0.1,0.4,0.2,0.5c0.3,0.5,0.9,0.6,1.4,0.3 l2.9-1.8c0.1-0.1,0.2-0.2,0.3-0.3C13.6,10.7,13.4,10.1,13,9.8z" />' +
                        '<path d="M10.5,1.9c-4.9,0-8.8,4-8.8,8.8c0,4.9,4,8.8,8.8,8.8s8.8-4,8.8-8.8C19.4,5.8,15.4,1.9,10.5,1.9z M10.5,18.5 c-4.3,0-7.8-3.5-7.8-7.8s3.5-7.8,7.8-7.8c4.3,0,7.8,3.5,7.8,7.8S14.9,18.5,10.5,18.5z" />' +
                        '</svg>'
                        +
                        '</span>'
                    ),
                    onclick() {
                        if (!decoderState.state.isEditing) {
                            console.log('点击播放', decoder);
                            if (decoderState.state.playing) {
                                decoder.stop()
                                    .then(() => {
                                        setDecoderState({ playing: false });
                                        if (timer) {
                                            clearInterval(timer);
                                        }
                                    })
                            } else {
                                decoder.play()
                                    .then(() => {
                                        setDecoderState({ playing: true })
                                    })
                            }
                            clickEventHandle('play');
                        } else {
                            console.log('编辑状态下不响应事件');
                        }
                    },
                    onmoveleft(part) {
                        console.log('播放键左移');
                        moveToLeft(this, `audioControls-${part}`);
                    },
                    onmoveright(part) {
                        console.log('播放键右移');
                        moveToRight(this, `audioControls-${part}`);
                    },
                    onremove(part) {
                        console.log('移除播放键');
                        removeBtn(this, `audioControls-${part}`);
                    },
                },
                {
                    id: 'capturePicture',
                    title: '截图',
                    domString: (
                        `<svg fill="${footer.color.split('-')[0]}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32">` +
                        '<path d="M10.8,7.7c-2,0-3.7,1.6-3.7,3.7S8.7,15,10.8,15c2,0,3.7-1.6,3.7-3.7S12.8,7.7,10.8,7.7z M10.8,8.7c1.5,0,2.7,1.2,2.7,2.7S12.2,14,10.8,14c-1.5,0-2.7-1.2-2.7-2.7S9.3,8.7,10.8,8.7z" />' +
                        '<path d="M8.6,3.7l-0.1,0C8,3.7,7.7,4,7.5,4.3l-1,1.7l-1.3,0C4,6.1,3.1,7,3.1,8.2v7.1 c0,1.2,0.9,2.1,2.1,2.1h11.1c1.2,0,2.1-0.9,2.1-2.1V8.2l0-0.1c-0.1-1.1-1-1.9-2.1-1.9l-1.3,0l-1.1-1.8c-0.2-0.4-0.7-0.6-1.1-0.6H8.6 z M8.6,4.7h4.2c0.1,0,0.2,0.1,0.3,0.1l1.2,2c0.1,0.2,0.3,0.2,0.4,0.2h1.6c0.6,0,1.1,0.5,1.1,1.1v7.1c0,0.6-0.5,1.1-1.1,1.1H5.1 c-0.6,0-1.1-0.5-1.1-1.1V8.2c0-0.6,0.5-1.1,1.1-1.1h1.6c0.2,0,0.3-0.1,0.4-0.2l1.2-2C8.4,4.7,8.5,4.7,8.6,4.7z" />' +
                        '</svg>'
                    ),
                    onclick() {
                        if (!decoderState.state.isEditing) {
                            console.log('点击截图', decoder);
                            decoder.capturePicture(0, 'default');
                            clickEventHandle('capturePicture');
                        } else {
                            console.log('编辑状态下不响应事件');
                        }
                    },
                    onmoveleft(part) {
                        console.log('截图键左移');
                        moveToLeft(this, `audioControls-${part}`);
                    },
                    onmoveright(part) {
                        console.log('截图键右移');
                        moveToRight(this, `audioControls-${part}`);
                    },
                    onremove(part) {
                        console.log('移除截图键');
                        removeBtn(this, `audioControls-${part}`);
                    },
                },
                {
                    id: 'recordvideo',
                    title: '录屏',
                    domString: (
                        `<svg fill="${footer.color.split('-')[0]}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32">` +
                        '<path d="M11.6,5.3H4.7c-1.4,0-2.5,1.1-2.5,2.5v5.9c0,1.4,1.1,2.5,2.5,2.5h6.9c1.4,0,2.5-1.1,2.5-2.5V7.7 C14.1,6.4,13,5.3,11.6,5.3z M4.7,6.3h6.9c0.8,0,1.5,0.7,1.5,1.5v5.9c0,0.8-0.7,1.5-1.5,1.5H4.7c-0.8,0-1.5-0.7-1.5-1.5V7.7 C3.3,6.9,3.9,6.3,4.7,6.3z" />' +
                        '<path d="M16.6,6.7c0.9-0.8,2.3-0.1,2.4,1l0,0.1v5.7c0,1.2-1.3,1.9-2.3,1.2l-0.1-0.1L13.3,12 c-0.2-0.2-0.2-0.5-0.1-0.7c0.2-0.2,0.4-0.2,0.6-0.1l0.1,0.1l3.3,2.7c0.3,0.2,0.7,0.1,0.8-0.3l0-0.1V7.8c0-0.4-0.4-0.6-0.7-0.4 l-0.1,0l-3.3,2.7c-0.2,0.2-0.5,0.1-0.7-0.1c-0.2-0.2-0.1-0.5,0-0.6l0.1-0.1L16.6,6.7z" />' +
                        '</svg>'
                    ),
                    onclick() {
                        if (!decoderState.state.isEditing) {
                            console.log('点击录屏', decoder);
                            if (decoderState.state.recording) {
                                decoder.stopSave(0);
                                setDecoderState({ recording: false });
                            } else {
                                decoder.startSave(0, new Date().Format('yyyyMMddhhmmss'));
                                setDecoderState({ recording: true });
                            }
                            clickEventHandle('recordvideo');
                        } else {
                            console.log('编辑状态下不响应事件');
                        }
                    },
                    onmoveleft(part) {
                        console.log('录屏键左移');
                        moveToLeft(this, `audioControls-${part}`);
                    },
                    onmoveright(part) {
                        console.log('录屏键右移');
                        moveToRight(this, `audioControls-${part}`);
                    },
                    onremove(part) {
                        console.log('移除录屏键');
                        removeBtn(this, `audioControls-${part}`);
                    },
                },
                {
                    id: 'sound',
                    title: '声音',
                    domString: '<span>' +
                        `<svg style="display:none" fill="${footer.color.split('-')[0]}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32">
            <path d="M8.5,4.2c0.8-0.7,2.1-0.2,2.2,0.9l0,0.1v10c0,1.1-1.2,1.7-2.1,1.1l-0.1-0.1l-3.3-2.8C5,13.2,5,12.9,5.1,12.7 c0.2-0.2,0.4-0.2,0.6-0.1l0.1,0.1l3.3,2.8c0.2,0.2,0.5,0.1,0.5-0.2l0-0.1v-10c0-0.3-0.3-0.4-0.5-0.3L9.2,5L5.9,7.8 C5.6,7.9,5.3,7.9,5.1,7.7C5,7.5,5,7.3,5.1,7.1L5.2,7L8.5,4.2z"/>
            <path d="M5.5,6.9C5.8,6.9,6,7.1,6,7.4c0,0.2-0.2,0.4-0.4,0.5l-0.1,0h-2C3.4,7.9,3.3,8,3.2,8.2l0,0.1v4 c0,0.2,0.1,0.3,0.3,0.3l0.1,0h2C5.8,12.5,6,12.7,6,13c0,0.2-0.2,0.4-0.4,0.5l-0.1,0h-2c-0.7,0-1.3-0.5-1.3-1.2l0-0.1v-4 c0-0.7,0.5-1.3,1.2-1.3l0.1,0H5.5z"/>
            <path d="M17.4,7.9c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.4,0.1,0.6l-0.1,0.1l-3.8,3.8c-0.2,0.2-0.5,0.2-0.7,0 c-0.2-0.2-0.2-0.4-0.1-0.6l0.1-0.1L17.4,7.9z"/>
            <path d="M13.7,7.9c0.2-0.2,0.4-0.2,0.6-0.1l0.1,0.1l3.8,3.8c0.2,0.2,0.2,0.5,0,0.7c-0.2,0.2-0.4,0.2-0.6,0.1l-0.1-0.1 l-3.7-3.8C13.5,8.4,13.5,8.1,13.7,7.9z"/>
            </svg>`
                        +
                        `<svg style="display:block" width="48" height="48" fill="${footer.color.split('-')[0]}" viewBox="-6 -6 32 32">
              <path d="M13.2,7.1c0.1-0.2,0.5-0.3,0.7-0.2c1.1,0.7,1.9,2.2,1.9,3.7c0,1.6-0.7,3-1.9,3.7
                c-0.2,0.1-0.5,0.1-0.7-0.2c-0.1-0.2-0.1-0.5,0.2-0.7c0.8-0.5,1.4-1.6,1.4-2.9c0-1.3-0.6-2.4-1.4-2.9C13.1,7.6,13,7.3,13.2,7.1z"/>
              <path d="M15.7,4.5c0.2-0.2,0.5-0.2,0.7-0.1C18,5.8,19,8.2,19,10.7c0,2.5-1,4.8-2.7,6.3
                c-0.2,0.2-0.5,0.2-0.7-0.1c-0.2-0.2-0.2-0.5,0.1-0.7c1.4-1.2,2.3-3.3,2.3-5.5c0-2.2-0.9-4.3-2.3-5.5C15.5,5,15.5,4.7,15.7,4.5z"/>
              <path id="Stroke-5" class="st1" d="M8.5,4.7c0.8-0.7,2.1-0.2,2.2,0.9l0,0.1v10c0,1.1-1.2,1.7-2.1,1.1l-0.1-0.1l-3.3-2.8
                C5,13.7,5,13.4,5.1,13.2c0.2-0.2,0.4-0.2,0.6-0.1l0.1,0.1l3.3,2.8c0.2,0.2,0.5,0.1,0.5-0.2l0-0.1v-10c0-0.3-0.3-0.4-0.5-0.3l-0.1,0
                L5.9,8.3C5.6,8.4,5.3,8.4,5.1,8.2C5,8,5,7.7,5.1,7.6l0.1-0.1L8.5,4.7z"/>
              <path  d="M5.5,7.4C5.8,7.4,6,7.6,6,7.9c0,0.2-0.2,0.4-0.4,0.5l-0.1,0h-2c-0.2,0-0.3,0.1-0.3,0.3l0,0.1v4
                c0,0.2,0.1,0.3,0.3,0.3l0.1,0h2C5.8,13,6,13.2,6,13.5c0,0.2-0.2,0.4-0.4,0.5l-0.1,0h-2c-0.7,0-1.3-0.5-1.3-1.2l0-0.1v-4
                c0-0.7,0.5-1.3,1.2-1.3l0.1,0H5.5z"/>
            </svg>`
                        +
                        '</span>',
                    onclick() {
                        if (!decoderState.state.isEditing) {
                            console.log('点击声音', decoder);
                            if (decoderState.state.openSound) {
                                decoder.closeSound();
                                setDecoderState({ openSound: false });
                            } else {
                                decoder.openSound();
                                setDecoderState({ openSound: true });
                            }
                            clickEventHandle('sound');
                        } else {
                            console.log('编辑状态下不响应事件');
                        }
                    },
                    onmoveleft(part) {
                        console.log('声音键左移');
                        moveToLeft(this, `audioControls-${part}`);
                    },
                    onmoveright(part) {
                        console.log('声音键右移');
                        moveToRight(this, `audioControls-${part}`);
                    },
                    onremove(part) {
                        console.log('移除声音键');
                        removeBtn(this, `audioControls-${part}`);
                    },
                },
                {
                    id: 'talk',
                    title: '对讲',
                    domString: (
                        '<div></div>' +
                        `<svg fill="${footer.color.split('-')[0]}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32">` +
                        '<path d="M10.1,2.7C8.5,2.7,7.2,4,7.2,5.6v5.2c0,1.6,1.3,2.9,2.9,2.9l0.2,0c1.5-0.1,2.7-1.4,2.7-2.9V5.6	C13,4,11.7,2.7,10.1,2.7z M10.1,3.7c1.1,0,1.9,0.9,1.9,1.9v5.2c0,1-0.8,1.8-1.8,1.9l-0.1,0c-1,0-1.9-0.9-1.9-1.9V5.6 C8.2,4.5,9,3.7,10.1,3.7z" />' +
                        '<path d="M15.1,8.5c0.2,0,0.4,0.2,0.5,0.4l0,0.1v1.7c0,3-2.5,5.5-5.5,5.5c-3,0-5.4-2.3-5.5-5.3l0-0.2V9 c0-0.3,0.2-0.5,0.5-0.5c0.2,0,0.4,0.2,0.5,0.4l0,0.1v1.7c0,2.5,2,4.5,4.5,4.5c2.4,0,4.4-1.9,4.5-4.3l0-0.2V9 C14.6,8.7,14.8,8.5,15.1,8.5z" />' +
                        '<path d="M13.5,17.7c0.3,0,0.5,0.2,0.5,0.5c0,0.2-0.2,0.4-0.4,0.5l-0.1,0h-7c-0.3,0-0.5-0.2-0.5-0.5 c0-0.2,0.2-0.4,0.4-0.5l0.1,0H13.5z" />' +
                        '<path d="M10.1,15.2c0.2,0,0.4,0.2,0.5,0.4l0,0.1v2.5c0,0.3-0.2,0.5-0.5,0.5c-0.2,0-0.4-0.2-0.5-0.4l0-0.1 v-2.5C9.6,15.4,9.8,15.2,10.1,15.2z" />' +
                        '</svg>'
                    ),
                    onclick() {
                        if (!decoderState.state.isEditing) {
                            const dom = document.getElementById('talk');
                            if (dom.getAttribute('class') && dom.getAttribute('class').indexOf('active') > -1) {
                                // 结束对讲
                                console.log('结束对讲');
                                //countTime('destory', 0);
                                //_this.openSound(0);
                                if (getParentUrl()) { // 如果被iframe嵌入
                                    window.parent.postMessage({ id: getQueryString('id'), type: 'stopTalk', code: 0 }, getParentUrl());
                                } else {
                                    window.stopTalk();
                                }
                                setDecoderState({ talking: false, openSound: true });
                                //window.stopTalk();
                                document.getElementById('talk').className = "";
                            } else {
                                // 开始对讲
                                if (decoderState.state.countTimer) {
                                    window.layer.msg('语音设备正忙，请稍后重试');
                                    return false;
                                }
                                setDecoderState({ talking: true, openSound: false });
                                //countTime('add', 0);
                                console.log('开始对讲，关闭声音');
                                //window.parent.decoder.startTalk()
                                if (getParentUrl()) { // 如果被iframe嵌入
                                    window.parent.postMessage({ id: getQueryString('id'), type: 'startTalk', code: 0 }, getParentUrl());
                                } else {
                                    themeStartTalk();
                                }
                                document.getElementById('talk').className = "active";
                            }
                            clickEventHandle('talk');
                        } else {
                            console.log('编辑状态下不响应事件');
                        }
                    },
                    onmoveleft(part) {
                        console.log('对讲键左移');
                        moveToLeft(this, `audioControls-${part}`);
                    },
                    onmoveright(part) {
                        console.log('对讲键右移');
                        moveToRight(this, `audioControls-${part}`);
                    },
                    onremove(part) {
                        console.log('移除对讲键');
                        removeBtn(this, `audioControls-${part}`);
                    },
                },
                {
                    id: 'pantile',
                    title: '云台控制',
                    domString: (
                        `<svg fill="${footer.color.split('-')[0]}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32">` +
                        '<path d="M10.2,7.8c1.6,0,2.9,1.3,2.9,2.9s-1.3,2.9-2.9,2.9s-2.9-1.3-2.9-2.9S8.5,7.8,10.2,7.8z M10.2,8.8c-1.1,0-1.9,0.9-1.9,1.9s0.9,1.9,1.9,1.9s1.9-0.9,1.9-1.9S11.2,8.8,10.2,8.8z" />' +
                        '<path d="M8.8,3.5c0.7-0.6,1.8-0.6,2.5-0.1l0.1,0.1l1.4,1.1c0.2,0.2,0.3,0.5,0.1,0.7 c-0.2,0.2-0.4,0.2-0.6,0.1l-0.1,0l-1.4-1.1C10.5,3.9,10,3.9,9.6,4.2L9.4,4.3L8,5.4C7.8,5.5,7.5,5.5,7.3,5.3c-0.2-0.2-0.1-0.5,0-0.6 l0.1-0.1L8.8,3.5z" />' +
                        '<path d="M2.5,12.3c-0.6-0.7-0.6-1.8-0.1-2.5l0.1-0.1l1.1-1.4c0.2-0.2,0.5-0.3,0.7-0.1 c0.2,0.2,0.2,0.4,0.1,0.6l0,0.1l-1.1,1.4C3,10.6,3,11.1,3.2,11.5l0.1,0.1L4.4,13c0.2,0.2,0.1,0.5-0.1,0.7c-0.2,0.2-0.5,0.1-0.6,0 l-0.1-0.1L2.5,12.3z" />' +
                        '<path d="M17.7,12.3c0.6-0.7,0.6-1.8,0.1-2.5l-0.1-0.1l-1.1-1.4c-0.2-0.2-0.5-0.3-0.7-0.1 c-0.2,0.2-0.2,0.4-0.1,0.6l0,0.1l1.1,1.4c0.3,0.4,0.3,0.9,0.1,1.3l-0.1,0.1L15.8,13c-0.2,0.2-0.1,0.5,0.1,0.7c0.2,0.2,0.5,0.1,0.6,0 l0.1-0.1L17.7,12.3z" />' +
                        '<path d="M8.8,18.2c0.7,0.6,1.8,0.6,2.5,0.1l0.1-0.1l1.4-1.1c0.2-0.2,0.3-0.5,0.1-0.7 c-0.2-0.2-0.4-0.2-0.6-0.1l-0.1,0l-1.4,1.1c-0.4,0.3-0.9,0.3-1.3,0.1l-0.1-0.1L8,16.3c-0.2-0.2-0.5-0.1-0.7,0.1 c-0.2,0.2-0.1,0.5,0,0.6l0.1,0.1L8.8,18.2z" />' +
                        '</svg>'
                    ),
                    onclick() {
                        if (!decoderState.state.isEditing) {
                            if (!decoderState.state.ptzing) {
                                _pantileShow();
                            } else {
                                _pantileHide()
                            }
                            clickEventHandle('pantile');
                        } else {
                            console.log('编辑状态下不响应事件');
                        }
                    },
                    onmoveleft(part) {
                        console.log('云台控制键左移');
                        moveToLeft(this, `audioControls-${part}`);
                    },
                    onmoveright(part) {
                        console.log('云台控制键右移');
                        moveToRight(this, `audioControls-${part}`);
                    },
                    onremove(part) {
                        console.log('移除云台控制键');
                        removeBtn(this, `audioControls-${part}`);
                    },
                },
                {
                    id: 'hd',
                    title: '画面清晰度',
                    domString: (
                        '<ul id="hdSelect" class="select" style="display:none;">' +
                        '<li class="selectOption" name="option" id="select-hd">高清</li>' +
                        '<li class="selectOption" name="option" id="select-sd">标清</li>' +
                        '</ul>' +
                        `<span><svg fill="${footer.color.split('-')[0]}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32">` +
                        '<path d="M17.4,16.5H3.1c-0.8,0-1.4-0.6-1.4-1.4V5.4c0-0.9,0.7-1.6,1.6-1.6h14.1c0.8,0,1.4,0.6,1.4,1.4v9.8 C18.8,15.9,18.2,16.5,17.4,16.5z M3.3,5C3.1,5,2.9,5.2,2.9,5.4v9.7c0,0.2,0.1,0.3,0.3,0.3h14.3c0.2,0,0.3-0.1,0.3-0.3V5.3 c0-0.2-0.1-0.3-0.3-0.3H3.3z" />' +
                        '<path d="M13.3,13.6h-1.6c-0.4,0-0.7-0.3-0.7-0.7V7.4c0-0.4,0.3-0.7,0.7-0.7h1.6c1.2,0,2.2,1,2.2,2.2v2.4 C15.6,12.6,14.6,13.6,13.3,13.6z M12.2,12.5h1.1c0.6,0,1.1-0.5,1.1-1.1V9c0-0.6-0.5-1.1-1.1-1.1h-1.1V12.5z" />' +
                        '<path d="M5.5,13.6c-0.3,0-0.6-0.2-0.6-0.6V7.3C5,7,5.2,6.8,5.5,6.8S6.1,7,6.1,7.3v5.7C6.1,13.4,5.8,13.6,5.5,13.6z" />' +
                        '<path d="M9.2,13.6c-0.3,0-0.6-0.2-0.6-0.6V7.3c0-0.3,0.2-0.6,0.6-0.6S9.8,7,9.8,7.3v5.7C9.8,13.4,9.5,13.6,9.2,13.6z" />' +
                        '<rect x="5.6" y="9.6" width="3.6" height="1.1" />' +
                        '</svg>'
                        +
                        `<svg style="display:none" fill="${footer.color.split('-')[0]}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -8 40 44">
                <path d="M24.1,23.8h-20c-1.1,0-1.9-0.9-1.9-1.9V8.4c0-1.2,1-2.2,2.1-2.2h19.7c1.1,0,1.9,0.9,1.9,1.9v13.8
                    C26,23,25.1,23.8,24.1,23.8z M4.3,7.7C4,7.7,3.7,8,3.7,8.4v13.5c0,0.2,0.2,0.4,0.4,0.4h20c0.2,0,0.4-0.2,0.4-0.4V8.2
                    c0-0.2-0.2-0.4-0.4-0.4H4.3z"/>
                <path d="M18.4,19.8h-2.2c-0.5,0-0.9-0.4-0.9-0.9v-7.8c0-0.5,0.4-0.9,0.9-0.9h2.2c1.7,0,3.1,1.4,3.1,3.1v3.3
                C21.5,18.4,20.1,19.8,18.4,19.8z M16.7,18.3h1.6c0.9,0,1.6-0.7,1.6-1.6v-3.3c0-0.9-0.7-1.6-1.6-1.6h-1.6V18.3z"/>
                <path d="M10.5,19.8c1.2,0,2.1-0.3,2.7-0.9c0.6-0.6,0.9-1.3,0.9-2.1c0-0.8-0.3-1.4-0.9-1.8c-0.4-0.2-1.1-0.5-2.2-0.8
                    l0,0l-1-0.2c-0.4-0.1-0.8-0.2-1-0.4c-0.4-0.2-0.6-0.5-0.6-0.9c0-0.4,0.1-0.6,0.4-0.9s0.7-0.3,1.3-0.3c0.8,0,1.4,0.2,1.8,0.6
                    c0.2,0.3,0.3,0.6,0.4,0.9l0,0h1.4c0-0.6-0.2-1.1-0.5-1.6c-0.6-0.8-1.6-1.2-2.9-1.2c-1,0-1.8,0.3-2.4,0.8c-0.6,0.5-0.9,1.2-0.9,2
                    c0,0.7,0.3,1.3,1,1.7c0.4,0.2,0.9,0.4,1.7,0.6l0,0l1.2,0.3c0.6,0.2,1.1,0.3,1.3,0.4c0.3,0.2,0.5,0.5,0.5,0.9c0,0.5-0.2,0.9-0.6,1.1
                    s-0.9,0.4-1.5,0.4c-0.9,0-1.6-0.2-2-0.7c-0.2-0.3-0.3-0.6-0.4-1.1l0,0H6.8c0,0.9,0.3,1.6,0.9,2.2C8.2,19.5,9.2,19.8,10.5,19.8z"/>
                <defs>
                  <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="15.2" y="10.3" width="6.2" height="9.5">
                    <feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
                  </filter>
                </defs>
                <mask maskUnits="userSpaceOnUse" x="15.2" y="10.3" width="6.2" height="9.5" id="mask-2_2_">
                  <g class="st2">
                    <path id="path-1_2_" class="st3" d="M24.1,23.1h-20c-0.6,0-1.2-0.5-1.2-1.2V8.2C2.9,7.5,3.5,7,4.1,7h19.7c0.8,0,1.4,0.6,1.4,1.4
                      v13.5C25.2,22.6,24.7,23.1,24.1,23.1z"/>
                  </g>
                </mask>
                <defs>
                  <filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="6.8" y="10.3" width="7.3" height="9.5">
                    <feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
                  </filter>
                </defs>
                <mask maskUnits="userSpaceOnUse" x="6.8" y="10.3" width="7.3" height="9.5" id="mask-2_3_">
                  <g class="st5">
                    <path id="path-1_3_" class="st3" d="M24.1,23.1h-20c-0.6,0-1.2-0.5-1.2-1.2V8.2C2.9,7.5,3.5,7,4.1,7h19.7c0.8,0,1.4,0.6,1.4,1.4
                      v13.5C25.2,22.6,24.7,23.1,24.1,23.1z"/>
                  </g>
                </mask>
                </svg>
                `
                        +
                        '</span>'

                    ),
                    onclick(e) {
                        if (!decoderState.state.isEditing) {
                            // document.getElementById('hdSelect').setAttribute('style', 'display:block;');
                            if (e.target.getAttribute('name') === 'option') {
                                // 选择清晰度选项时才触发事件
                                console.log(`选择画面清晰度-${e.target.innerHTML}`);
                                // _this.hd(e.target.id, () => {
                                //   document.getElementById('hdSelect').setAttribute('style', 'display:none;');
                                // });
                                //document.getElementById("hd-content").childNodes[1].style.fill = e.target.id === 'select-hd' ? footer.activeColor : "#FFFFFF";
                                // document.getElementById('hdSelect').setAttribute('style', 'display:none;');
                                if (decoderState.state.hding && e.target.id === 'select-sd') {
                                    decoder.changePlayUrl({ hd: false });
                                    setDecoderState({
                                        hding: false
                                    })
                                } else if (!decoderState.state.hding && e.target.id === 'select-hd') {
                                    decoder.changePlayUrl({ hd: true });
                                    setDecoderState({
                                        hding: true
                                    })
                                }
                            }
                            if (document.getElementById("hdSelect")) {
                                document.getElementById("hdSelect").style.display = document.getElementById("hdSelect").style.display === 'none' ? 'block' : 'none';
                            }
                            clickEventHandle('hd');
                        } else {
                            console.log('编辑状态下不响应事件');
                        }
                    },
                    onmoveleft(part) {
                        console.log('画面清晰度键左移');
                        moveToLeft(this, `audioControls-${part}`);
                    },
                    onmoveright(part) {
                        console.log('画面清晰度键右移');
                        moveToRight(this, `audioControls-${part}`);
                    },
                    onremove(part) {
                        console.log('移除画面清晰度键');
                        removeBtn(this, `audioControls-${part}`);
                    },
                },
                {
                    id: 'expend',
                    title: '全局全屏',
                    domString: (
                        `<span><svg fill="${footer.color.split('-')[0]}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32">` +
                        '<path d="M3.4,7.6c-0.3,0-0.5-0.2-0.5-0.5V5.3c0-1.2,1-2.3,2.2-2.3h1.8c0.3,0,0.5,0.2,0.5,0.5S7.2,4.1,6.9,4.1H5.2 c-0.7,0-1.2,0.6-1.2,1.3v1.8C3.9,7.4,3.7,7.6,3.4,7.6z" />' +
                        '<path d="M6.9,18.1H5.2c-1.2,0-2.2-1-2.2-2.2v-1.8c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v1.8c0,0.7,0.6,1.2,1.2,1.2 h1.8c0.3,0,0.5,0.2,0.5,0.5S7.2,18.1,6.9,18.1z" />' +
                        '<path d="M15.7,18.1h-1.8c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h1.8c0.7,0,1.2-0.6,1.2-1.2v-1.8 c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v1.8C17.9,17.1,16.9,18.1,15.7,18.1z" />' +
                        '<path d="M17.4,7.6c-0.3,0-0.5-0.2-0.5-0.5V5.3c0-0.7-0.6-1.3-1.2-1.3h-1.8c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h1.8 c1.2,0,2.2,1,2.2,2.3v1.8C17.9,7.4,17.7,7.6,17.4,7.6z" />' +
                        '</svg>'
                        +
                        `<svg style="display:none" width="48" height="48" fill="${footer.color.split('-')[0]}" viewBox="-6 -6 32 32">
              <path class="st1" d="M5.7,8.1H3.9c-0.3,0-0.6-0.2-0.6-0.6S3.6,7,3.9,7h1.9c0.7,0,1.3-0.6,1.3-1.3V3.8c0-0.3,0.2-0.6,0.6-0.6
                s0.6,0.2,0.6,0.6v1.9C8.2,7,7.1,8.1,5.7,8.1z"/>
              <path class="st1" d="M7.6,17.7c-0.3,0-0.6-0.2-0.6-0.6v-1.9c0-0.7-0.6-1.3-1.3-1.3H3.9c-0.3,0-0.6-0.2-0.6-0.6s0.2-0.6,0.6-0.6h1.9
                c1.3,0,2.4,1.1,2.4,2.4v1.9C8.2,17.5,7.9,17.7,7.6,17.7z"/>
              <path class="st1" d="M13.4,17.7c-0.3,0-0.6-0.2-0.6-0.6v-1.9c0-1.3,1.1-2.4,2.4-2.4h1.9c0.3,0,0.6,0.2,0.6,0.6S17.5,14,17.2,14
                h-1.9c-0.7,0-1.3,0.6-1.3,1.3v1.9C14,17.5,13.8,17.7,13.4,17.7z"/>
              <path class="st1" d="M17.2,8.1h-1.9c-1.3,0-2.4-1.1-2.4-2.4V3.8c0-0.3,0.2-0.6,0.6-0.6S14,3.5,14,3.8v1.9C14,6.4,14.6,7,15.3,7h1.9
                c0.3,0,0.6,0.2,0.6,0.6S17.5,8.1,17.2,8.1z"/>
            </svg>
            </span>`
                    ),
                    onclick() {
                        if (!decoderState.state.isEditing) {
                            // decoder.fullScreen();
                            if(decoderState.state.webExpending) {
                                console.log("正在网站全屏")
                                return false;
                            }
                            console.log('点击全局全屏', decoder);
                            if (!isMobile) {
                                if (!decoderState.state.expending) {
                                    window.parent.postMessage({ id: getQueryString('id'), type: 'customFullScreen', code: 0 }, getParentUrl());
                                    requestFullScreen(window.document.body)
                                } else {
                                    cancelFullScreen();
                                }
                            }
                            clickEventHandle('expend');
                            setDecoderState({
                                expending: !decoderState.state.expending
                            })
                        } else {
                            console.log('编辑状态下不响应事件');
                        }
                    },
                    onmoveleft(part) {
                        console.log('全局全屏键左移');
                        moveToLeft(this, `audioControls-${part}`);
                    },
                    onmoveright(part) {
                        console.log('全局全屏键右移');
                        moveToRight(this, `audioControls-${part}`);
                    },
                    onremove(part) {
                        console.log('移除全局全屏键');
                        removeBtn(this, `audioControls-${part}`);
                    },
                },
                {
                    id: 'webExpend',
                    title: '网页全屏',
                    domString: (
                        `<span><svg fill="${footer.color.split('-')[0]}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32">` +
                        '<path d="M3.1,7.6c-0.3,0-0.5-0.2-0.5-0.5V5.3c0-1.2,1-2.3,2.2-2.3h1.8c0.3,0,0.5,0.2,0.5,0.5S6.8,4.1,6.6,4.1H4.8 c-0.7,0-1.2,0.6-1.2,1.3v1.8C3.6,7.4,3.3,7.6,3.1,7.6z" />' +
                        '<path d="M15.3,18.1h-1.8c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h1.8c0.7,0,1.2-0.6,1.2-1.2v-1.8 c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v1.8C17.6,17.1,16.6,18.1,15.3,18.1z" />' +
                        '<circle class="st2" cx="10.2" cy="10.4" r="1.1"/>'+
                        '</svg>'
                        +
                        `<svg fill="${footer.color.split('-')[0]}" style="display:none;" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32">
            <path class="st1" d="M5.4,8.1H3.5C3.2,8.1,3,7.9,3,7.6s0.2-0.5,0.5-0.5h1.9c0.8,0,1.4-0.6,1.4-1.4V3.8c0-0.3,0.2-0.5,0.5-0.5
              s0.5,0.2,0.5,0.5v1.9C7.7,7,6.7,8.1,5.4,8.1z"/>
            <path class="st1" d="M13.1,17.7c-0.3,0-0.5-0.2-0.5-0.5v-1.9c0-1.3,1.1-2.4,2.4-2.4h1.9c0.3,0,0.5,0.2,0.5,0.5s-0.2,0.5-0.5,0.5H15
              c-0.8,0-1.4,0.6-1.4,1.4v1.9C13.6,17.4,13.4,17.7,13.1,17.7z"/>
              <circle class="st2" cx="10.2" cy="10.4" r="1.1"/>
            `
                        +
                        '</svg></span>'
                    ),
                    onclick() {
                        if (!decoderState.state.isEditing) {
                            if(decoderState.state.expending) {
                                console.log("正在全屏")
                                return false;
                            }
                            console.log('点击网页全屏', decoder);
                            // window.parent.postMessage({ id: '', type: 'customFullScreen', code: 0 }, getParentUrl());
                            // requestFullScreen(window.document.body);
                            setDecoderState({
                                webExpending: !decoderState.state.webExpending
                            });
                            clickEventHandle('webExpend');
                        } else {
                            console.log('编辑状态下不响应事件');
                        }
                    },
                    onmoveleft(part) {
                        console.log('网页全屏键左移');
                        moveToLeft(this, `audioControls-${part}`);
                    },
                    onmoveright(part) {
                        console.log('网页全屏键右移');
                        moveToRight(this, `audioControls-${part}`);
                    },
                    onremove(part) {
                        console.log('移除网页全屏键');
                        removeBtn(this, `audioControls-${part}`);
                    },
                },
            ];
        }
    matchFooterOptList = matchFooterOpt('simple', themeData[0]);// 底部按钮列表
    renderNewFooterOpt(document.getElementById("audioControls"), getFooterBtnDict(this, themeData[0]), themeData[0]);
    // 注册云台隐藏事件
    // document.getElementById("ez-ptz-close").onclick = () => {
    //   _pantileHide();
    // }
    /**
     * @description 遍历传入的footer，同时用于判断某个id是否在渲染队列中
     * @param {*} template 播放模式
     * @param {*} footer 按钮列表
     * @param {*} obj 需要判断的对象id，若不传则直接返回result数组
     */
    function matchFooterOpt(template, footer, obj) {
        const result = [];
        if (template === 'simple' || template === 'voice') {
            if (footer.btnList && footer.btnList instanceof Array) {
                result.push({ footerContainer: true });
                for (const item of footer.btnList) {
                    // 移动端不添加截图，录制，网页全屏按钮
                    // if (!(isMobile && ['capturePicture', 'recordvideo', 'webExpend'].indexOf(item.id) !== -1)) {
                    //   result.push(item);
                    // }
                    switch (item.iconId) {
                        case 'capturePicture':
                            if (!isMobile) {
                                result.push(item);
                            }
                            break;
                        case 'recordvideo':
                            if (!isMobile) {
                                result.push(item);
                            }
                            break;
                        case 'webExpend':
                            if (!isMobile) {
                                result.push(item);
                            }
                            break;
                        case 'talk':
                            if (decoderState.state.url.indexOf("rec") === -1) {
                                result.push(item);
                            }
                            break;
                        case 'pantile':
                            if (decoderState.state.url.indexOf("rec") === -1) {
                                result.push(item);
                            }
                            break;
                        case 'hd':
                            if (decoderState.state.url.indexOf("rec") === -1) {
                                result.push(item);
                            }
                            break;
                        default:
                            result.push(item);
                            break
                    }
                }
            }
        }
        if (obj) {
            // 传入obj时，判断该obj是否在result中
            return result.findIndex(i => i[obj] === true) > -1;
        }

        // 不传入obj则直接返回result
        return result;
    }
    /**
     * @description 给domObj添加移动、删除的操作按钮
     * @param domObj 需要处理的dom元素（string）
     * @param movable 按钮是否可以移动
     * @returns 挂载了移动、删除按钮的dom元素（string）
     */
    function editFooterBtnHOC(domObj, part, movable) {
        let editSVG;// 编辑按钮组合dom
        let objE;// 临时存储对象
        let dom;// 处理后得到的的dom
        if (movable) {
            editSVG = `${`<span id="${domObj.id}" style="position:relative;${part === 'left' ? 'margin-left: 12px;' : 'margin-right: 12px;'}">`
                + `<span id="${domObj.id}-left" title="左移"  style="position: absolute;top: calc(50% - 10px);left: -6px;display: none;">`
                + '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080;">'
                + '<path d="M7.4,10V5.3c0-0.3-0.3-0.6-0.6-0.6c-0.1,0-0.3,0.1-0.4,0.2L3.7,7.4c-0.2,0.2-0.3,0.6,0,0.8 c0,0,0,0,0.1,0.1l2.7,2.2c0.2,0.2,0.6,0.2,0.8-0.1C7.3,10.3,7.4,10.2,7.4,10z" />'
                + '</svg>'
                + '</span>'
                + `<span id="${domObj.id}-content" title="${domObj.title}">`}${domObj.domString
                }</span>`
                + `<span id="${domObj.id}-right" title="右移" style="position: absolute;top: calc(50% - 10px);left: calc(100% - 6px);display: none;">`
                + '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 10 15" style="background:#00000080">'
                + '<path d="M3.4,5.2v4.7c0,0.3,0.3,0.6,0.6,0.6c0.1,0,0.3-0.1,0.4-0.2l2.7-2.5c0.2-0.2,0.3-0.6,0-0.8 c0,0,0,0-0.1-0.1L4.4,4.8C4.1,4.6,3.8,4.6,3.6,4.9C3.5,5,3.4,5.1,3.4,5.2z" />'
                + '</svg>'
                + '</span>'
                + `<span id="${domObj.id}-remove" title="移除" style="position: absolute;top: -16px;left: calc(100% - 10px);display: none;">`
                + '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15">'
                + '<circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7" />'
                + '<rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1" />'
                + '<line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1" />'
                + '<line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5" />'
                + '</svg>'
                + '</span>'
                + '</span>';
        } else {
            editSVG = `${`<span id="${domObj.id}" style="position:relative;${part === 'left' ? 'margin-right: 12px;' : 'margin-left: 12px;'}">`
                + `<span id="${domObj.id}-content" title="${domObj.title}">`}${domObj.domString
                }</span>`
                + `<span id="${domObj.id}-remove" title="移除" style="position: absolute;top: -10px;left: 38px;display: none;">`
                + '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15">'
                + '<circle style="fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.8011;" cx="7.5" cy="7.6" r="7" />'
                + '<rect x="3.9" y="3.5" class="st1" style="fill:none;" width="8.1" height="8.1" />'
                + '<line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="5" x2="10" y2="10.1" />'
                + '<line style="fill:none;stroke:#ffffff;stroke-width:0.5833;stroke-linecap:round;" x1="4.9" y1="10.1" x2="10" y2="5" />'
                + '</svg>'
                + '</span>'
                + '</span>';
        }
        objE = document.createElement('div');
        objE.innerHTML = editSVG;
        dom = objE.childNodes[0];
        // 绑定事件，[0]：左移按钮dom，[1]：主体按钮dom，[2]：右移按钮dom，[3]：移除按钮dom
        if (domObj.onmoveleft) {
            dom.childNodes[0].onclick = function () {
                domObj.onmoveleft(part);
            };
        }
        if (domObj.onclick) {
            dom.childNodes[1].onclick = domObj.onclick;
        }
        if (domObj.onmouseup) {
            dom.childNodes[1].onmouseup = domObj.onmouseup;
        }
        if (domObj.onmousedown) {
            dom.childNodes[1].onmousedown = domObj.onmousedown;
        }
        if (domObj.onmoveright) {
            dom.childNodes[2].onclick = function () {
                domObj.onmoveright(part);
            };
        }
        if (domObj.onremove) {
            dom.childNodes[3].onclick = function () {
                domObj.onremove(part);
            };
        }
        return dom;
    }

    /**
     * @description 根据底部按钮列表中的元素在targetDOM中插入对应的按钮DOM
     * @param targetDOM 用于挂载按钮的目标dom
     */
    function renderNewFooterOpt(targetDOM, btnDict, footer) {
        // 将底部划分为左右两个区域
        targetDOM.setAttribute('style', `display: flex;justify-content: space-between;background-image: linear-gradient(
180deg, rgba(0,0,0,0) 0%, ${footer.backgroundColor} 80%);`);
        const targetDOMLeft = document.createElement('div');
        targetDOMLeft.setAttribute('class', 'audio-controls-left');
        targetDOMLeft.setAttribute('id', 'audioControls-left');
        targetDOMLeft.setAttribute('style', 'display: flex;justify-content: space-between;');
        const targetDOMRight = document.createElement('div');
        targetDOMRight.setAttribute('class', 'audio-controls-right');
        targetDOMRight.setAttribute('id', 'audioControls-right');
        targetDOMRight.setAttribute('style', 'display: flex;justify-content: space-between;');
        targetDOM.appendChild(targetDOMLeft);
        targetDOM.appendChild(targetDOMRight);

        // window.onmouseup = function (event) {
        //   // 全局点击事件，用于关闭清晰度选择框
        //   const e = event || window.event;
        //   e.stopPropagation();
        //   const parentDOM = e.target.parentNode;
        //   if (!((parentDOM.parentNode && parentDOM.parentNode.id === 'hd') && (parentDOM.parentNode.parentNode && parentDOM.parentNode.parentNode.id === 'hd'))) {
        //     // if (document.getElementById('hdSelect')) {
        //     //   document.getElementById('hdSelect').style.display = 'none';
        //     // }
        //   }
        // };
        for (var i = 0; i < matchFooterOptList.length; i++) {
            btnDict.map((item) => {
                if (item.id === matchFooterOptList[i].iconId && matchFooterOptList[i].isrender) {
                    var dom = editFooterBtnHOC(item, matchFooterOptList[i].part, true);
                    if(matchFooterOptList[i].defaultActive > 0) {
                        dom.setAttribute('class', 'active');
                        const tmp = dom.childNodes[1];
                        tmp.childNodes[0].style.fill = footer.activeColor.split('-')[0];
                    }
                    if (matchFooterOptList[i].part === 'right') {
                        targetDOMRight.appendChild(dom);
                    } else {
                        targetDOMLeft.appendChild(dom);
                    }
                    // //自动播放
                    // if (item.id === 'play') {
                    //     autoplay = matchFooterOptList[i].defaultActive == 1 ? 1 : 0;
                    //     setDecoderState({
                    //       playing: autoplay === 1
                    //     });
                    // }
                    // // 默认开启声音
                    // if (item.id === 'sound') {
                    //     audioId = matchFooterOptList[i].defaultActive == 1 ? 0 : -1;
                    //     setDecoderState({
                    //       openSound: audioId == 0
                    //     });
                    // }
                }
            });
        }
        if (footer.defaultActiveBtn.indexOf('play') === -1) {
            autoplay = 0;
            setDecoderState({
                playing: false
            });
        }
        if (footer.defaultActiveBtn.indexOf('sound') === -1) {
            audioId = -1;
            setDecoderState({
                openSound: false
            })
        }
    }
    //编辑状态
    window.edit = edit;
    function edit(callback) {
        const audioControlsDOM = document.getElementById('audioControls');
        const headerMessageDOM = document.getElementById('headControl');
        if (!decoderState.state.isEditing) {
            headerMessageDOM.setAttribute('class', 'head-message headerEditing');
            audioControlsDOM.setAttribute('class', 'audio-controls footerEditing');
        } else {
            headerMessageDOM.setAttribute('class', 'head-message');
            audioControlsDOM.setAttribute('class', 'audio-controls');
        }
        decoderState.state.isEditing = !decoderState.state.isEditing;
    };
    // iframe 传递数据
    window.addEventListener(
        "message",
        function (event) {
            var origin = event.origin;
            var id = getQueryString('id');
            if (event.data) {
                var action = event.data;
                if (typeof event.data == 'object') {
                    action = event.data.action;
                }
                switch (action) {
                    case "play":
                        if ((typeof event.data === 'object') && event.data.url) {
                            url = event.data.url;
                        }
                        if (typeof event.data === 'object' && event.data.accessToken) {
                            accessToken = event.data.accessToken;
                        }
                        decoder.play({
                            url: url,
                            accessToken: accessToken,
                        });
                        break;
                    case "stop":
                        $("#play").removeClass("hide");
                        $("#stop").addClass("hide");
                        var decoderPromise = decoder.stop(0);
                        decoderPromise.then(function (data) {
                            window.parent.postMessage({ id: id, type: 'stop', code: 0 }, origin);
                            if (timer) {
                                clearInterval(timer);
                            }
                        })
                            .catch(function (err) {
                                window.parent.postMessage({ id: id, type: 'stop', code: -1 }, origin);
                            })
                        break;
                    case "capturePicture":
                        var fileName = 'default';
                        var isUndownload = false;
                        if ((typeof event.data === 'object') && event.data.fileName) {
                            fileName = event.data.fileName;
                        }
                        if ((typeof event.data === 'object') && event.data.isUndownload) {
                            isUndownload = event.data.isUndownload;
                        }
                    function callback(data) {
                        console.log("截图成功，用户执行关闭成功后的操作", data);
                        window.parent.postMessage({ id: id, type: 'capturePicture', code: 0, data: data }, origin);
                    }
                        decoder.capturePicture(0, fileName, callback, isUndownload);
                        break;
                    case "openSound":
                        var openSoundResult = decoder.openSound(0);
                        if (openSoundResult == 0) {
                            window.parent.postMessage({ id: id, type: 'openSound', code: 0 }, origin);
                        } else {
                            window.parent.postMessage({ id: id, type: 'openSound', code: -1 }, origin);
                        }
                        break;
                    case "closeSound":
                        var closeSoundResult = decoder.closeSound(0);
                        console.log("closeSoundResult", closeSoundResult)
                        if (closeSoundResult == 0) {
                            window.parent.postMessage({ id: id, type: 'closeSound', code: 0 }, origin);
                        } else {
                            window.parent.postMessage({ id: id, type: 'closeSound', code: -1 }, origin);
                        }
                        break;
                    case "startSave":
                        var fileName = 'default';
                        if ((typeof event.data === 'object') && event.data.fileName) {
                            fileName = event.data.fileName;
                        }
                        var startSavePromise = decoder.startSave(0, fileName);
                        startSavePromise.then(function (data) {
                            window.parent.postMessage({ id: id, type: 'startSave', code: 0 }, origin);
                        })
                            .catch(function (error) {
                                console.log("start Save error", error)
                                window.parent.postMessage({ id: id, type: 'startSave', code: 0 }, origin);
                            })
                        setDecoderState({ recording: true });
                        break;
                    case "stopSave":
                        var stopSavePromise = decoder.stopSave(0);
                        stopSavePromise.then(function (data) {
                            console.log("stop save success", stopSavePromise)
                            window.parent.postMessage({ id: id, type: 'stopSave', code: 0 }, origin);
                        })
                            .catch(function (error) {
                                console.log("stop Save error", error)
                                window.parent.postMessage({ id: id, type: 'stopSave', code: -1 }, origin);
                            })
                        setDecoderState({ recording: false })
                        break;
                    case "enableZoom":
                        decoder.enableZoom();
                        break;
                    case "closeZoom":
                        decoder.closeZoom();
                        break;
                    case "fullScreen":
                        var fullScreenResult = decoder.fullScreen(true);
                        window.parent.postMessage({ id: id, type: 'fullScreen', code: 0, data: fullScreenResult }, origin);
                        // toggleFullscreen();
                        break;
                    case "getOSDTime":
                        var getOSDTimePromise = decoder.getOSDTime();
                        getOSDTimePromise.then(function (data) {
                            window.parent.postMessage({ id: id, type: 'getOSDTime', code: 0, data: data }, origin);
                        });
                        break;
                    case "autoResize":
                        var width = document.documentElement.clientWidth;
                        var height = document.documentElement.clientHeight;
                        decoder.reSize(width, height);
                        break
                    case "reSize":
                        var width = document.documentElement.clientWidth;
                        var height = document.documentElement.clientHeight;
                        if ((typeof event.data === 'object') && event.data.width && event.data.height) {
                            width = event.data.width;
                            height = event.data.height;
                        }
                        decoder.reSize(width, height);
                        break
                    case 'edit':
                        //edit();
                        edit();
                        break;
                    case 'btnReRender':
                        btnReRender(event.data.data)
                        break
                    case 'changePlayUrl':
                        decoder.changePlayUrl(event.data.data);
                        if (event.data.data && event.data.data.type) {
                            if(event.data.data.deviceSerial) {
                                deviceSerial = event.data.data.deviceSerial;
                            }
                            if(event.data.data.channelNo) {
                                channelNo = event.data.data.channelNo;
                            }
                            if(event.data.data.validCode) {
                                validCode = event.data.data.validCode;
                            }
                            if (event.data.data.type.indexOf('rec') !== -1) {
                                if (event.data.data.type === 'cloud.rec') {
                                    url = `ezopen://${validCode ? `${validCode}@` : ""}open.ys7.com/${deviceSerial}/${channelNo}.cloud.rec`;
                                    setDecoderState({
                                        url: url,
                                        type: 'cloud.rec',
                                    })
                                } else {
                                    url = `ezopen://${validCode ? `${validCode}@` : ""}open.ys7.com/${deviceSerial}/${channelNo}.rec`;
                                    setDecoderState({
                                        url: url,
                                        type: 'rec',
                                    })
                                }
                                if(event.data.data.deviceSerial || event.data.data.channelNo){
                                    getDeviceInfo();
                                }
                                if(!isMobile) {
                                    initTimeLine();
                                    syncTimeLine();
                                }
                            } else {
                                url = `ezopen://${validCode ? `${validCode}@` : ""}open.ys7.com/${deviceSerial}/${channelNo}.live`;
                                setDecoderState({
                                    url: url,
                                    type: 'live',
                                });
                                if(event.data.data.deviceSerial || event.data.data.channelNo){
                                    getDeviceInfo();
                                }
                            }
                        }
                        btnReRender(EZUIKit.params.footer)
                        break;
                    case 'fetchThemeData':
                        fetchThemeData();
                        break
                    case 'setThemeData':
                        setThemeData(event.data.data.accessToken, event.data.data.header, event.data.data.footer);
                        break
                    default:
                        console.log("收到未知指令");
                        break;
                }
            }
        },
        false
    );
    function _handlePtzTouch(e, type) {
        var container = document.getElementById('ez-ptz-container').getBoundingClientRect();
        containerCenterX = container.left + 41;
        containerCenterY = container.top + 41;
        var eventX = e.x || e.changedTouches[0].clientX;
        var eventY = e.y || e.changedTouches[0].clientY;
        var left = eventX - containerCenterX;
        var top = eventY - containerCenterY;
        var direction = 0; //操作命令：0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距


        var url = domain + '/api/lapp/device/ptz/start';
        // var nextPtzImg = ptzNormalImg;
        // var nextPtzImgFailed = ptzNormalImg;
        // 判读方位
        if (Math.abs(left) > Math.abs(top)) {
            if (left > 0) {
                direction = 3;
                // nextPtzImg = ptzRightImgSuccess;
                // nextPtzImgFailed = ptzRightImgFailed;
            } else {
                direction = 2;
                // nextPtzImg = ptzLeftImgSuccess;
                // nextPtzImgFailed = ptzLeftImgFailed;
            }
        } else {
            if (top > 0) {
                direction = 1;
                // nextPtzImg = ptzDownImgSuccess;
                // nextPtzImgFailed = ptzDownImgFailed;
            } else {
                direction = 0;
                // nextPtzImg = ptzTopImgSuccess;
                // nextPtzImgFailed = ptzTopImgFailed;
            }
        }
        document.getElementById("ez-ptz-container").style = `background-image:linear-gradient(${direction === 0 ? 180 : (direction === 1 ? 0 : (direction === 2 ? 90 : 270))}deg, #1d8dd8 0%, rgba(100,143,252,0.00) 30%)`;
        if (type === 'stop') {
            url = domain + '/api/lapp/device/ptz/stop';
            document.getElementById("ez-ptz-container").style = "";
        }

        $.ajax({
            url: url,
            type: 'POST',
            data: {
                accessToken: accessToken,
                deviceSerial: deviceSerial,
                channelNo: channelNo,
                direction: direction,
                speed: 1,
            },
            dataType: 'json',
            success: function (data) {
                if (data.code == 200) {
                    //document.getElementById('ptz-img-container').childNodes[0].src = nextPtzImg;
                } else {
                    //document.getElementById('ptz-img-container').childNodes[0].src = nextPtzImgFailed;
                    // layer.msg(data.msg);
                    if (data.code == 60005 || data.code == 60002 || data.code == 60003 || data.code == 60004) {
                        document.getElementById("ez-ptz-container").style = `background-image:linear-gradient(${direction === 0 ? 180 : (direction === 1 ? 0 : (direction === 2 ? 90 : 270))}deg, #f45656 0%, rgba(100,143,252,0.00) 30%)`;
                    }
                }
            },
            error: function (err) {
                console.log("err", err);
            }
        });
    }
    if (!isMobile) {
        // 云台控制
        document.getElementById("ez-ptz-container").onmousedown = (e) => {
            e.preventDefault();
            console.log("触摸开始");
            _handlePtzTouch(e, 'start');
        }
        document.getElementById("ez-ptz-container").onmouseup = (e) => {
            e.preventDefault();
            console.log("触摸结束");
            _handlePtzTouch(e, 'stop');
        }
    } else {

        // 云台控制
        document.getElementById("ez-ptz-container").ontouchstart = (e) => {
            e.preventDefault();
            console.log("触摸开始");
            _handlePtzTouch(e, 'start');
        }
        document.getElementById("ez-ptz-container").ontouchend = (e) => {
            e.preventDefault();
            console.log("触摸结束");
            _handlePtzTouch(e, 'stop');
        }

    }
    if (!isMobile && url.indexOf("rec") !== -1) {
        initTimeLine();
    }
    /**
     *初始化回放
     */
    var timeLine;
    function initTimeLine() {
        document.getElementById("canvas-container").style.display = "flex";
        document.getElementById("headerControls-right").style.display = "flex";

        // 增加头部云存储/本地SD卡切换按钮

        // 回放时间轴
        if(!timeLine) {
            timeLine = new TimeLine();
            var width = document.documentElement.clientWidth;
            timeLine.init({
                id: 'canvas',
                width: width - 100,
                onChange: (time) => {
                    console.log("time change", time);
                    var newBegin = new Date(time).Format('yyyyMMddhhmmss');
                    timeLine.readOnly();
                    unSyncTimeLine();
                    // 重新渲染回放，重新执行播放
                    decoder.changePlayUrl({ begin: newBegin })
                }
            });
        }
        renderRec(new Date().Format('yyyy-MM-dd'));
        document.getElementById('timeline-scale-add').onclick = () => {
            var currentTimeWidth = timeLine.options.timeWidth;
            if (currentTimeWidth < 3) {
                timeLine.changeSize(++currentTimeWidth);
            }
        }
        document.getElementById('timeline-scale-sub').onclick = () => {
            var currentTimeWidth = timeLine.options.timeWidth;
            if (currentTimeWidth > 0) {
                timeLine.changeSize(--currentTimeWidth);
            }
        }
        var datepickerVisible = false;
        $('#datepicker').val(new Date())
        // 日期选择：
        $('#datepicker').datepicker({
            autoShow: false,
            autoHide: true,
            autoPick: true,
            language: 'zh-CN',
            defaultDate: new Date(),
            format: 'yyyy-mm-dd',
            endDate: new Date(),
        });
        // $('#datepicker').datepicker('hide');
        $('#datepicker').on('pick.datepicker', function (e) {
            console.log("E", e.date);
            console.log("重新选择日期", e.date, new Date(e.date).Format('yyyyMMdd'), new Date(document.getElementById("datepicker").value).Format('yyyyMMdd'));
            if (e.date > new Date() || (new Date(e.date).Format('yyyyMMdd') === new Date(document.getElementById("datepicker").value).Format('yyyyMMdd'))) {
                e.preventDefault(); // Prevent to pick the date
            } else {
                var begin = new Date(e.date).Format('yyyyMMdd')
                // 重新渲染回放，重新执行播放
                renderRec(e.date);
                decoder.changePlayUrl({ begin: begin });
            }
            $('#datepicker').datepicker('hide');
            datepickerVisible = false;
        });
        $('#datepicker').bind("click", function (e) {
            if (datepickerVisible) {
                $('#datepicker').datepicker('hide');
            } else {
                $('#datepicker').datepicker('show');
            }
            datepickerVisible = !datepickerVisible
        })
    }
    // 渲染回放片段
    function renderRec(date) {
        var dateStart = new Date(new Date(date).Format('yyyy-MM-dd 00:00:00')).getTime();
        var dateEnd = new Date(new Date(date).Format('yyyy-MM-dd 23:59:59')).getTime();
        if (document.getElementById("cloudRec-content")) {
            document.getElementById("cloudRec-content").children[0].children[0].style.fill = url.indexOf('cloud') !== -1 ? EZUIKit.params.footer.activeColor.replace('-diy', "") :  EZUIKit.params.footer.color.replace('-diy', "");
        }
        if (document.getElementById("rec-content")) {
            document.getElementById("rec-content").children[0].children[0].style.fill = url.indexOf('cloud') !== -1 ?  EZUIKit.params.footer.color.replace('-diy', "") : EZUIKit.params.footer.activeColor.replace('-diy', "");
        }
        var recSliceParams = {
            accessToken: accessToken,
            recType: url.indexOf('cloud') !== -1 ? 1 : 2,
            deviceSerial: deviceSerial,
            channelNo: channelNo,
            startTime: dateStart,
            endTime: dateEnd,
            version: '2.0'
        }
        function recAPISuccess(data) {
            if (data.data && data.data.files && data.data.files.length > 0) {
                console.log("获取云存储片段成功", data);
                var dataArr = data.data.files;
                var nextFileTime = new Date().getTime();
                var isAll = data.data.isAll;
                var number = 0;
                if (isAll) {
                    timeLine.getRecord(dataArr, dateStart, dateEnd)
                } else {
                    recTransaction();
                    // 云存储回调事务
                    function recTransaction() {
                        function recAPIV2Success(data) {
                            if (data.data && data.data.files && data.data.files.length > 0) {
                                if (data.data.isAll == false) {
                                    if (data.data.files) {
                                        dataArr = dataArr.concat(data.data.files);
                                    }
                                    nextFileTime = data.data.nextFileTime > 0 ? data.data.nextFileTime : new Date().getTime();
                                    recTransaction();
                                } else {
                                    console.log("云存储执行渲染片段");
                                    timeLine.getRecord(dataArr, dateStart, dateEnd)
                                }
                            } else {
                                recSliceArr = recSliceArrFun(dataArr);
                                var recSliceArrJSON = JSON.stringify(recSliceArr).replace('\\', '');
                                realUrl += ('&recSlice=' + recSliceArrJSON.replace('\\', '')) + '&r=' + Math.random();
                                resolve(realUrl);
                            }
                        }
                        function recAPIV2Error(err) {
                            console.log(err);
                        }
                        recSliceParams.startTime = nextFileTime;
                        request(domain + "/api/lapp/video/by/time", 'POST', recSliceParams, '', recAPIV2Success, recAPIV2Error);
                    }
                }
            } else if (data.data && data.data.length > 0) {
                console.log("获取本地录像片段成功", data);
                timeLine.getRecord(data.data, dateStart, dateEnd);
            } else {
                // videoLoading =false;
            }
        }
        function recAPIError(error) {
            console.log("获取片段失败", error)
        }
        var recAPIUrl = domain + "/api/lapp/video/by/time";
        request(recAPIUrl, 'POST', recSliceParams, '', recAPISuccess, recAPIError);
    }
    var timer;
    function syncTimeLine() {
        if (timer) {
            clearInterval(timer);
        }
        // if (decoder && timeLine) {
        timer = setInterval(function () {
            var getOSDTimePromise = decoder.getOSDTime();
            getOSDTimePromise.then(function (v) {
                if (v == -1) {
                    console.log("获取播放时间错误");
                } else {
                    if (v > 0) {
                        timeLine.run({ time: new Date(v > 1000000000000 ? v : v * 1000) });
                        //$(".current-time").text(new Date(new Date(v > 1000000000000 ? v : v * 1000)).Format('yyyy-MM-dd hh:mm:ss'))
                    }
                }
            })
        }, 1000)
        //}
    }
    function unSyncTimeLine() {
        if (timer) {
            clearInterval(timer);
        }
    }
    // 重新渲染按钮
    function btnReRender(params) {
        if (params.areaName === 'header') {
            const headerMessageDOM = document.getElementById('headControl');
            var backgroundColor = params.backgroundColor.split('-')[0];
            var color = params.color.split('-')[0];
            headerMessageDOM.innerHTML = '';
            matchHeaderOptList = matchHeaderOpt('simple', params);
            if(!params.activeColor) {
                params.activeColor = color;
            }
            renderNewHeaderOpt(headerMessageDOM, headBtnDict, params);
            headerMessageDOM.setAttribute('style', `background:${backgroundColor};color:${color};`);
            EZUIKit.params.header = params;
        } else {
            const audioControlsDOM = document.getElementById('audioControls');
            var backgroundColor = params.backgroundColor.split('-')[0];
            var color = params.color.split('-')[0];
            const activeColor = params.activeColor.split('-')[0];
            audioControlsDOM.innerHTML = '';
            matchFooterOptList = matchFooterOpt('simple', params);
            renderNewFooterOpt(audioControlsDOM, getFooterBtnDict(this, params), params);
            audioControlsDOM.setAttribute('style', `display: flex;justify-content: space-between;background-image: linear-gradient(
180deg, rgba(0,0,0,0) 0%, ${backgroundColor} 80%);`);
            var activeDOMList = $("#audioControls").find('.active');
            EZUIKit.params.footer = params;
            for (let index = 0; index < activeDOMList.length; index++) {
                const tmpDOM = activeDOMList[index].childNodes[1];
                tmpDOM.childNodes[0].style.fill = activeColor;
            }
        }
    };
    // 对讲模块
    function themeStartTalk() {
        console.log("执行开始对讲");
        var apiSuccess = function (data) {
            if (data.code == 200) {
                var apiResult = data.data;
                if (apiResult) {
                    // 临时将https转换为websocket
                    var rtcTrunk = apiResult.rtcUrl;
                    if (rtcTrunk.indexOf("ws") === -1) {
                        rtcTrunk = rtcTrunk.replace("https", "wss").replace("rtcgw", "rtcgw-ws");
                    }
                    EZUIKit.opt.rtcUrl = rtcTrunk;
                    EZUIKit.opt.ttsUrl = "tts://" + apiResult.ttsUrl;
                    var talk = "talk://" + EZUIKit.opt.deviceSerial + ":0:" + EZUIKit.opt.channelNo + ":cas.ys7.com:6500";
                    EZUIKit.opt.talkLink = EZUIKit.opt.ttsUrl + "/" + talk;
                    EZUIKit.opt.stream = apiResult.stream;
                    window.startTalk();
                }
            }
        }
        var apiError = function () {
            layer.msg("获取对讲token失败")
        }
        request(domain + '/api/lapp/live/talk/url', 'POST', {
            accessToken: EZUIKit.opt.accessToken,
            deviceSerial: EZUIKit.opt.deviceSerial,
            channelNo: EZUIKit.opt.channelNo
        }, '', apiSuccess, apiError);
    }
    // 时间计数
    function countTime(type, start = 0) {
        if (decoderState.state.countTimer) { clearInterval(decoderState.state.countTimer) };
        if (type === 'add') {
            var i = start;
            document.getElementById("time-area").style.display = 'flex';
            decoderState.state.countTimer = setInterval(function () {
                ++i;
                document.getElementById("time-area").children[1].innerHTML = formatSeconds(i);
            }, 1000);

        } else if (type === 'destroy') {
            if (decoderState.state.countTimer) { clearInterval(decoderState.state.countTimer) };
            decoderState.state.countTimer = undefined;
            document.getElementById("time-area").children[1].innerHTML = '00:00';
            document.getElementById("time-area").style.display = 'none';
        }
        //将秒数转换为时分秒格式
        function formatSeconds(value) {

            var theTime = parseInt(value);// 秒
            var middle = 0;// 分
            var hour = 0;// 小时
            var secondV = '00';
            var minV = '00';
            var hourV = '00'

            if (theTime > 59) {
                middle = parseInt(theTime / 60);
                theTime = parseInt(theTime % 60);
                if (middle > 59) {
                    hour = parseInt(middle / 60);
                    middle = parseInt(middle % 60);
                }
            }
            secondV = parseInt(theTime) > 9 ? parseInt(theTime) : ('0' + parseInt(theTime));
            minV = parseInt(middle) > 9 ? parseInt(middle) : ('0' + parseInt(middle));
            hourV = (parseInt(hour) > 9 ? parseInt(hour) : ('0' + parseInt(hour)));
            if (hour > 0) {
                return hourV + ':' + minV + ':' + secondV;
            } else if (middle > 0) {
                return minV + ':' + secondV;
            } else {
                return '00:' + secondV;
            }
        }
    }
    function clickEventHandle(type, state) {
        console.log("点击事件", type, state);
        window.parent.postMessage({ id: getQueryString("id"), type: 'clickEventHandle', data: { type: type, state: decoderState.state }, code: 0 }, getParentUrl());
    }
    window.addEventListener('keydown', function (event) {
        if (event.which == 27) {
            window.parent.postMessage({ id: getQueryString("id"), type: 'clickEventHandle', data: { type: 'esc', state: decoderState.state }, code: 0 }, getParentUrl());
            setDecoderState({ expending: false })
        }
    });
    function hideHeader() {
        document.getElementById("headControl").style.display = "none";
        reSizeByControls();
    }
    function showHeader() {
        if (document.getElementById("headControl").style.display != 'flex') {
            document.getElementById("headControl").style.display = "flex";
            reSizeByControls();
        }
    }
    function hideFooter() {
        document.getElementById("audioControls").style.display = "none";
    }
    function showFooter() {
        if (document.getElementById("audioControls").style.display != 'flex') {
            document.getElementById("audioControls").style.display = "flex";
        }
    }
    function reSizeByControls() {
        var width = document.documentElement.clientWidth;
        var height = document.documentElement.clientHeight;
        if (document.getElementById("headControl").style.display !== 'none') {
            height = height - 48;
        }
        if (document.getElementById("canvas-container").style.display !== 'none') {
            height = height - 48;
        }
        if(decoder) {
            decoder.reSize(width, height);
        }
    }
    $(function () {
        $(window.document.body).bind("click touchStart", function () {
            console.log("开始聚焦");
            if (autoFocus > 0) {
                stopAutoFocus();
                if(!autoFocusing) {
                    startAutoFocus();
                }
            }
        })
    });
    function startAutoFocus() {
        autoFocusing = true;
        setTimeout(() => {
            decoder.getOSDTime().then((data) => {
                if (data > 0) {
                    hideFooter();
                }
            });
            autoFocusing = false;
        }, autoFocus * 1000)
    }
    function stopAutoFocus() {
        showFooter();
    }
</script>


<div class="xl-chrome-ext-bar" id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
    <div class="xl-chrome-ext-bar__logo"></div>

    <a id="xl_chrome_ext_download" href="javascript:;" class="xl-chrome-ext-bar__option">下载视频</a>
    <a id="xl_chrome_ext_close" href="javascript:;" class="xl-chrome-ext-bar__close"></a>
</div></body></html>